分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

导航,头部,CSS基础

发布时间:2023-09-06 01:18责任编辑:傅花花关键词:CSS

1.制作自己的导航条。

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS问答平台</title></head><body><nav> ???<a href=""><img src="w_02_08_00.png">首页</a> ???<a href="http://www.gzcc.cn/">下载app</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a></nav></body></html>

2.HTML头部元素:

1.<base>  定义了页面链接标签的默认链接地址

2.<style>  定义了HTML文档的样式文件

3.<link>  定义了一个文档和外部资源之间的关系

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS问答平台</title> ????<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank"> ???<link rel="stylesheet" type="text/css" href="T5.css"> ???<style type="text/css"> ???????p{ ???????????color:darkcyan;font-size: 10px; ???????} ???????.textblue{ ???????????color:blue; ???????????text-decoration: underline; ???????} ???????.tea{ ???????????background-color:yellow; ???????} ???????c{ ???????????color:yellow; ???????} ???</style></head><body><nav> ???<a href=""><img src="w_02_08_00.png">首页</a> ???<a href="http://www.gzcc.cn/">下载app</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a></nav></body></html>

3.练习样式表:

 a.行内样式表

 b.内嵌样式表

 c.外部样式表

4.分别练习定义三类选择器:

 a.HTML 选择器

 b.CLASS 类选择器

 c.ID 选择器

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS</title></head><body><h1>MIS问答平台</h1>行内样式: <div><p>双11全部商品<span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 50px;background-color: #FFD700">50%OFF!</span></p></div><hr>内嵌样式表:<style type="text/css"> ?p{ ???color:red; ???} ???h1{ ???background-color:green; ???} ???.textblue{ ???color:blue; ???}</style><p> ?双11全部商品50%OFF!</p><p> ?双11全部商品50%OFF!</p><p class="textblue"> ?双11全部商品50%OFF!</p> 外部样式表:
<h1>通知</h1>
<p>双11全部商品50%OFF!</p>
<p id="tt">双11全部商品50%OFF!</p>
<p class="textblue">双11全部商品50%OFF!</p>
 </body> </html>

 css

 p{ ???color:red; ???} ???h1{ ???background-color:green; ???} ???.textblue{ ???color:blue; ???tt{ ???????????background-color:#FFD700; ???}

导航,头部,CSS基础

原文地址:http://www.cnblogs.com/0020l/p/7682348.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved