HTML+CSS
希望能每天更新 祷告吧kikikkk
导航栏
导航条基本上是一个链接列表所以使用 ul 和li元素非常有意义
垂直导航栏
需要 a元素的样式，建立一个垂直的导航栏
导航栏的各个格子宽度一定要在a标签里创建
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>随便敲敲</title><style type="text/css">*{padding: 0px; margin: 0px;}ul{list-style: none; /* 移除列表前小标志。一个导航栏并不需要列表标记*/}/* 核心块*/li a{border: 1px solid red; /*创建连接并添加边框 单单给li加会有重叠现象 在ul跟li大小一样时可分开加边框 ：ul上边框 li左中右;*/text-align: center; /*字体居中*/text-decoration: none; /*取消字体下划线 */margin: 2px auto;/* auto使元素块居中网页中心*/display: block; /* 显示元素块的链接，使整块区域可点击*/width: 66px; height: 50px; /* 默认下元素块的大小,高度以及宽度*/background: cornflowerblue ;}li a:hover{/* 移动鼠标触发事件*/color: crimson; /* 字体颜色改变*/background: cadetblue ; /* 背景颜色改变*/}/*激活导航栏*/.active{background: bisque;color: white;}</style></head><body><ul><li><a href="">谁</a></li><li><a href="">知</a></li><li><a href="">道</a></li><li><a href="">呢</a></li></ul></body></html>
水平导航栏
默认情况下 li 是块元素
如果要创建水平导航栏使用内联 inline 或者是浮动 float
inline 链接宽度可能会不相等，float 所有的链接宽度相等
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>随便敲敲</title><style type="text/css">*{padding: 0px; margin: 0px;}ul{width: 403px; /*边框线1px有3条 所有100*4+4=403px 不用细想自己去测试一下就懂了*/height: 50px;border: solid #4169E1 1px;list-style: none;overflow: hidden;}/*内联或者浮动来创建水平导航栏*/li{border-right: solid 1px royalblue;float: left;background: darksalmon; }li:last-child{border-right:none;/*边框线另一种方式处理 ,消除重复*/}li a{display: block; /*将a标签从行标签变为块级*/width: 100px;height: 50px;text-align: center; text-decoration: none;line-height: 50px;/*字体垂直居中*/}li a:hover{color: aliceblue;background: cornflowerblue;}</style></head><body><ul><li><a href="">谁</a></li><li><a href="">知</a></li><li><a href="">道</a></li><li><a href="">呢</a></li></ul></body></html>
下拉式导航栏
在水平导航栏的基础上编辑下拉式导航栏
我遇到了困难 我很焦灼
html背景
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position<!DOCTYPE html><html><head><meta charset="utf-8" /><title>随便敲敲</title><style type="text/css">.bigbox{ height: 353px;width: 351px;background-color: #E9E9F2;}h3{padding-left:25px ;padding-top:36px ;}</style></head><body><div class="bigbox"><h3>密码登录</h3><form action=""><div class="用户名"><input type="text" placeholder="会员名/邮箱/手机号" /></div><div class="密码"><input type="text" /></div><div class="登录"><input type="submit" value="登录" /></div><div class="登录方式"><a href="#">微博登录</a><a href="#">支付宝登录</a></div><div class="bottom"><a href="">WANGJIMIMA</a></div></form></div></body></html>
