第一题代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业一</title>
<style>
*{
margin: 0;
padding: 0;
}
div.box1{
/*border: 1px solid red;*/
/*height: 500px;*/
line-height: 500px;
text-align: center;
background: #4A4D4A;
}
a.download{
text-decoration: none;
/*border: 1px solid red;*/
font-size: 40px;
display: inline-block;
height: 100px;
width: 300px;
align-content: center;
color: white;
background: red;
border-radius:10px ;
}
</style>
</head>
<body>
<div class="box1">
<a href="#" class="download">立即下载</a>
</div>
</body>
</html>
显示结果
第二题代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业二</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*border: 1px solid red;*/
width: 1300px;
height: 900px;
margin: auto;
background:ghostwhite;
}
ul.one{
/*border: 1px solid red;*/
width: 400px;
height: 500px;
display: inline-block;
list-style: none;
margin: 10px;
}
ul li{
/*border: 1px solid red;*/
}
ul li.name{
position: relative;
top: 16px;
}
ul li.explain{
position: relative;
top: 32px;
}
</style>
</head>
<body>
<div class="box">
<ul class="one">
<li class="pictrue"><img src="img/nn.png" width="400px"></li>
<li class="name"><font size="5">恰到好处的简单</font></li>
<li class="explain"> 元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框不能正常显示,父元素的兄弟元素位置布局错误等,</li>
</ul>
<ul class="one">
<li class="pictrue"><img src="img/nn.png" width="400px"></li>
<li class="name"><font size="5">恰到好处的简单</font></li>
<li class="explain"> 元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框不能正常显示,父元素的兄弟元素位置布局错误等,</li>
</ul>
<ul class="one">
<li class="pictrue"><img src="img/nn.png" width="400px"></li>
<li class="name"><font size="5">恰到好处的简单</font></li>
<li class="explain"> 元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框不能正常显示,父元素的兄弟元素位置布局错误等,</li>
</ul>
</div>
</body>
</html>
显示结果
第三题代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业三</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
/*border: 1px solid red;*/
}
ul{
border: 1px solid red;
width: 1300px;
height: 60px;
margin: auto;
background: gray;
}
li{
/*border: 1px solid red;*/
list-style: none;
/*display: inline-block;*/
float: left;
line-height: 60px;
text-align: center;
font-size: 20;
background: gray;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background: black;
}
.nn{
font-size: 25;
color: white;
width: 300px;
height: 60px;
}
.xx{
width: 200px;
height: 60px;
}
.menu > li > ol{
display: none;
}
.menu > li:hover ol{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="nn">
<strong>百度游戏</strong> | <b>乐玩</b>
</li>
<li class="xx"><a href="#">首页</a>
<ol>
<li class="xx"><a href="#">子菜单1</a></li>
<li class="xx"><a href="#">子菜单2</a></li>
<li class="xx"><a href="#">子菜单3</a></li>
<li class="xx"><a href="#">子菜单4</a></li>
<li class="xx"><a href="#">子菜单5</a></li>
</ol>
</li>
<li class="xx"><a href="#">商城</a></li>
<li class="xx"><a href="#">页游</a></li>
<li class="xx"><a href="#">排行榜</a></li>
<li class="xx"><a href="#">繁星计划</a></li>
</ul>
</div>
</body>
</html>
显示结果
第四题代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业四</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid red;
width: 1300px;
height: 1000px;
margin: auto;
border-radius:30px ;
}
div > ul{
border: 1px solid red;
width: 400px;
height: 300px;
display: inline-block;
margin: 13px;
list-style: none;
}
ul > li{
/*border: 1px solid red;*/
text-align: center;
}
ul > li.one{
font-size: 30px;
}
ul > li.two{
position: relative;
left: 120px;
text-align: left;
}
ul > li.link{
border: 1px solid blueviolet;
width: 200px;
height: 30px;
position: relative;
top: 100px;
margin: auto;
line-height: 30px;
text-align: center;
}
a{
color: blueviolet;
text-decoration: none;
}
ul > li.two::before{
content: "&";
width: 16px;
height: 16px;
color: blueviolet;
}
</style>
</head>
<body>
<div class="box">
<ul class="mod">
<li class="one">Bootstrap V3</li>
<li class="two">支持IE8+浏览器</li>
<li class="two">支持IE8+浏览器</li>
<li class="link"><a>Bootstrap V3中文文档</a></li>
</ul>
<ul class="mod">
<li class="one">Bootstrap V3</li>
<li class="two">支持IE8+浏览器</li>
<li class="two">支持IE8+浏览器</li>
<li class="link"><a>Bootstrap V3中文文档</a></li>
</ul>
<ul class="mod">
<li class="one">Bootstrap V3</li>
<li class="two">支持IE8+浏览器</li>
<li class="two">支持IE8+浏览器</li>
<li class="link"><a>Bootstrap V3中文文档</a></li>
</ul>
</div>
</body>
</html>
显示结果
第五题代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业5</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid red;
width: 1300px;
height: 800px;
margin: auto;
}
.box1{
border: 1px solid red;
width: 300px;
height: 320px;
display: inline-block;
margin: 8px;
border-radius:20px ;
text-align: center;
}
.box3{
border: 1px solid red;
width: 290px;
height: 40px;
margin: auto;
position: relative;
top: 50px;
border-radius:5px ;
}
ol.box3 li{
border-left: 1px solid red;
width: 40px;
line-height: 40px;
text-align: center;
float: left;
list-style: none;
}
a{
text-decoration: none;
color: black;
}
ul.box3 >li:hover{
background: gainsboro;
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<ol class="box3">
<li><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ol>
</div>
</body>
</html>