HTml新标签属性页面
产品基本样式展示
PC端
移动端
1.涉及到的新标签属性
2.首栏导航条
相关布局代码
相关css代码
@media only screen and (min-width: 1000px) and (max-width: 1920px) {//媒体查询
*{
margin: 0 auto;//页面居中
font-family: "Utsaah";//字体
}
body ul li{
list-style: none;//无序列表去除点
}
a{
text-decoration: none;//超级链接去除下划线
color: black;
}
#main{
width: 80%;
}
#header{
width: 100%;
height: 60px;
margin: 20px;
}
#header ul{
width: 1000px;
}
#header ul li{
float: left;
width: 160px;
padding-left: 1%;
position: relative;//相对定位
line-height: 60px;
margin-left: 30px;
}
#header ul li img{
position: absolute;//绝对定位
margin-top: 10px;
left: -40px;
}
#header ul li a img{
margin-right: 20px;
border-radius: 50%;//使图片变圆
-webkit-box-shadow: 2px 2px 0px gray;//解决兼容性问题+图片背景阴影
-moz-box-shadow: 2px 2px 0px gray;
-ms-box-shadow: 2px 2px 0px gray;
-o-box-shadow: 2px 2px 0px gray;
}
#header ul li:nth-child(1) a img:hover{ //nth-child(1) 括号中为li的序号
color: red;
content: url(../img/导航_02.gif);//改变图片
-webkit-box-shadow: 2px 2px 0px red;
-moz-box-shadow: 2px 2px 0px red;
-ms-box-shadow: 2px 2px 0px red;
-o-box-shadow: 2px 2px 0px red;
}
#header ul li:nth-child(2) a img:hover{
color: red;
content: url(../img/导航_05.gif);
-webkit-box-shadow: 2px 2px 0px red;
-moz-box-shadow: 2px 2px 0px red;
-ms-box-shadow: 2px 2px 0px red;
-o-box-shadow: 2px 2px 0px red;
}
#header ul li:nth-child(3) a img:hover{
color: red;
content: url(../img/导航_06.gif);
-webkit-box-shadow: 2px 2px 0px red;
-moz-box-shadow: 2px 2px 0px red;
-ms-box-shadow: 2px 2px 0px red;
-o-box-shadow: 2px 2px 0px red;
}
#header ul li:nth-child(4) a img:hover{
color: red;
content: url(../img/导航_08.gif);
-webkit-box-shadow: 2px 2px 0px red;
-moz-box-shadow: 2px 2px 0px red;
-ms-box-shadow: 2px 2px 0px red;
-o-box-shadow: 2px 2px 0px red;
}
#header ul li:nth-child(5) a img:hover{
color: red;
content: url(../img/导航_10.gif);
-webkit-box-shadow: 2px 2px 0px red;
-moz-box-shadow: 2px 2px 0px red;
-ms-box-shadow: 2px 2px 0px red;
-o-box-shadow: 2px 2px 0px red;
}
#header ul li a:hover{
display: block;
color: red;
}
/*二级*/
#header ul li ul{
text-align: center;
display: none;
}
#header ul li:hover ul{
position: absolute;
display:block;
margin-left: -150px;
}
#header ul li:hover ul li{
float:none;
width: 210px;
border:1px solid gainsboro;
background: #fff;
}
#haeder ul li:hover ul li:hover a{
display:block;
color:#F00;
}
/*三级*/
#header ul li:hover ul li ul{
display: none;
}
#header ul li:hover ul li:hover ul{
display: block;
position: absolute;
left: 290px;
top:0px;
}
2.尾栏右部
相关布局代码
相关css代码
footer #you section dl{
-webkit-column-count: 2;//html新标签属性--分栏，可以对内容进行布局上的调试，前缀为解决兼容性问题，分别是谷歌，火狐，IE，Oprea
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
}
3.移动端导航条
布局代码与上面的PC端是一样的这里主要是css代码的变化
@media (max-width: 1000px){//当页面在1000像素之下是实行代码
#header ul li{ //隐藏li
display: none;//隐藏
float: none;
background: #FFFFFF;
}
#header ul .current{ //只显示第一个li，这里面给了li一个class标签
display: block;//显示
}
#header ul:hover li{
display: block;
}
#header ul li:hover ul{//当鼠标移动到li（其实也就是第一个li上面，其余的li就display：block显示出来）
position: absolute;
display:block;
margin-left: 26px;
margin-top: -35px;
}
#header ul li:hover ul li:hover ul{
display: block;
position: absolute;
left: 140px;
top:0px;
}
}
4.源码网址
https://files.cnblogs.com/files/huanghundaxia/%E5%AF%BC%E8%88%AA.zip
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box{ 8 color: yellow; 9 width: 500px; 10 height: 600px; 11 background: url(img/11601153.png); 12 border: 5px solid #000; 13 overflow: auto; 14 resize: both; 15 border: 5px solid #000; 16 } 17 .box .nei{ 18 resize: both; 19 overflow: inherit; 20 } 21 .box p{ 22 color:blueviolet; 23 } 24 .box .pp{ 25 color:inherit; 26 } 27 #over{ 28 background-color:#00FFFF; 29 width:150px; 30 height:150px; 31 overflow: scroll; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="box"> 37 <br /> 38 <p>图片原石尺寸</p> 39 <img src="img/back.png"/> 40 <br /> 41 <h2>overflew</h2> 42 <div id="over"> 43 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 44 </div> 45 46 <p>的买鞋呀是你什么杨总的人在这里</p> 47 <p class="pp">的买鞋呀是你什么杨总的人在这里</p> 48 <p>的买鞋呀是你什么杨总的人在这里</p> 49 50 51 <div class="nei"> 52 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条 53 </div> 54 </div> 55 </body> 56 </html>
