欢迎各位复制粘贴
往下看
网页body内容:
<div class="one">
<a href="#">产品</a>
<a href="#">介绍</a>
<a href="#">技术</a>
<a href="#">领域</a>
<a href="#">事实</a>
<a href="#">联系人</a>
<a href="#">版权声明</a>
</div>
<div class="two">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="there">
<br>is xiaobai
</div>
没加css效果图
网页css内容:
a {
display: inline-block; /*元素显示模式的转换*/
width: 150px;
height: 50px;
background-color: #55585a; /*背景颜色*/
font: 30px 华文行楷;
color: #000;
text-decoration: none; /*删除下划线*/
padding-left: 20px; /*内容与左边边框线的距离*/
padding-right: 20px; /*内容与右边边框线的距离*/
padding-top: 5px; /*内容与顶边边框线的距离*/
line-height: 45px; /*行高既字体最底端与字体内部顶端之间的距离*/
text-align: center; /*文本内容居中对齐*/
}
a:hover {
background-color: #ff6700;
}
.one{
padding-left: 70px;
}
.two{
height: 600px;
width: 1455px;
background-color:pink;
padding-left: 65px;
}
.two ul li{
list-style: none;
background-color:red;
height: 600px;
width: 400px;
float: left;
margin-right: 50px;
}
.there{
text-align: center;
background-color: grey;
width: 100%;
height: 100px;
font-size: 20px;
font-family: 黑体;
}
最终效果图:
谢谢大家 看完本人成果,
刚学没多久 希望在这记录自己的成长。