这次又留了两道编程题(￢ ︿ ￢)
①用三种方法使div元素并列摆放
嗯，相信看过视频的人都能想到这三种方法就是：
- 浮动法
- 内联块法（inline-block）
- 定位法
代码↓↓↓
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div并列——浮点</title>
<style>
div{
width:200px;
height:200px;
background-color: red;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div并列——内联块</title>
<style>
div{
width:200px;
height:200px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div并列——定位1</title>
<style>
div{background:red;height:200px;width:200px;}
.div2{position:relative;left:210px;bottom:200px;}
.div3{position:relative;left:420px;bottom:400px;}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并列——定位2</title>
<style>
body{margin: 0;}
div{
width: 200px;
height:200px;
}
.div1{
background-color: yellow;
}
.div2{
background-color: blue;
position: absolute;
left: 200px;
top: 0px;}
.div3{
background-color: green;
position: absolute;
left: 400px;
top:0px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
至于为什么我写了四种呢，就是我把position写了两种形式罢了...
②做一个万恶的新闻表格
这个真心是想了很久，首先要把它分成三块去考虑，头部中的top是我用截图截下来的😁，中间的照片的阴影很难处理，最后还要进行z-index处理，尾部是由无序排列组成的，总之就是很多层套在一起，我知道我的方法很麻烦，可在麻烦后总能学到一些东西，这才是学习的意义所在啊...
先上效果图吧！
屏幕截图(76).png
屏幕截图(77).png
似乎还可以的样子有没有！注意：前方高能！
↓↓↓
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>香菇</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:226px;
height: 1130px;
background-color: #fcfafb;
margin: 100px auto;
padding:20px 20px 15px 20px;
}
.title{
height: 89px;
background: url(../21日编程2所需图片/top.jpg) no-repeat;
}
.top1{
height: 40px;
width: 226px;
padding-left: 30px;
font : light 20px/20px "Microsoft YaHei UI";
color: #000;
}
.top21{
padding: 10px 27px 8px 30px;
border: 1px solid #ccc;
border-bottom: none;
}
.top22{
padding: 10px 19px 8px 19px;
border-bottom: 1px solid #ccc;
}
.image{
height: 891px;width: 226px;
}
.image1{
height: 160px;
margin-bottom: 20px;
}
.img1{
position:relative;
width=226px; height=160px;}
.ms11{
position: absolute;
bottom: 0;
left: 0;
width: 226px;
height: 26px;
background: #000;
opacity: 0.6;
color: #fff;
font-family: Microsoft YaHei UI;
font-size: 11px;
line-height: 26px;
text-indent: 30px;
}
.ms1{
position: absolute;
bottom: 0;
left: 0;
height: 26px;
width: 20px;
background: #e2291c;
z-index: 1;
line-height: 26px;
text-align: center;
}
.image2{
height: 160px;
margin-bottom: 20px;
}
.img2{
position:relative;
width=226px; height=160px;}
.ms22{
position: absolute;
bottom: 0;
left: 0;
width: 226px;
height: 26px;
background: #000;
opacity: 0.6;
color: #fff;
font-family: Microsoft YaHei UI;
font-size: 11px;
line-height: 26px;
text-indent: 30px;
}
.ms2{
position: absolute;
bottom: 0;
left: 0;
height: 26px;
width: 20px;
background: #e2291c;
z-index: 1;
line-height: 26px;
text-align: center;
}
.image3{
height: 160px;
margin-bottom: 20px;
}
.img3{
position:relative;
width=226px; height=160px;}
.ms33{
position: absolute;
bottom: 0;
left: 0;
width: 226px;
height: 26px;
background: #000;
opacity: 0.6;
color: #fff;
font-family: Microsoft YaHei UI;
font-size: 11px;
line-height: 26px;
text-indent: 30px;
}
.ms3{
position: absolute;
bottom: 0;
left: 0;
height: 26px;
width: 20px;
background: #e2291c;
z-index: 1;
line-height: 26px;
text-align: center;}
.image4{
height: 160px;
margin-bottom: 20px;
}
.img4{
position:relative;
width=226px; height=160px;}
.ms44{
position: absolute;
bottom: 0;
left: 0;
width: 226px;
height: 26px;
background: #000;
opacity: 0.6;
color: #fff;
font-family: Microsoft YaHei UI;
font-size: 11px;
line-height: 26px;
text-indent: 30px;
}
.ms4{position: absolute;
bottom: 0;
left: 0;
height: 26px;
width: 20px;
background: #e2291c;
z-index: 1;
line-height: 26px;
text-align: center;}
.image5{
height: 160px;
margin-bottom: 11px;
}
.img5{
position:relative;
width=226px; height=160px;}
.ms55{
position: absolute;
bottom: 0;
left: 0;
width: 226px;
height: 26px;
background: #000;
opacity: 0.6;
color: #fff;
font-family: Microsoft YaHei UI;
font-size: 11px;
line-height: 26px;
text-indent: 30px;
}
.ms5{
position: absolute;
bottom: 0;
left: 0;
height: 26px;
width: 20px;
background: #e2291c;
z-index: 1;
line-height: 26px;
text-align: center;}
.table{
height: 150px;
margin-bottom: 15px;
}
.box2{
line-height: 30px;
}
li{
list-style: none;
line-height: 1px;
font-size: 12px;
font-family: Microsoft YaHei UI;
font-weight:Light;
padding-left: 10px;
}
a{
text-decoration:none;
color: #404646;
}
.six{
position: relative;
left: -9px;
top: 10px;
display:inline;
}
.seven{
position: relative;
left: -9px;
top: 10px;
display:inline;
}
.eight{
position: relative;
left: -9px;
top: 10px;
display:inline;
}
.nine{
position: relative;
left: -9px;
top: 10px;
display:inline;
}
.ten{
position: relative;
left: -9px;
top: 10px;
display:inline;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="top"></div>
<div class="top1">排行榜</div>
<span class="top21">最热排行</span><span class="top22">新课上线</span>
</div>
<div class="image">
<div class="image1">
<div class="img1">
<span class="ms1">1</span>
<span class="ms11">张小龙：微信四大价值观</span>
</div>
<!---->
</div>
<div class="image2">
<div class="img2">
<span class="ms2">2</span>
<span class="ms22">刘超：互联网新时代需要什么样...</span>
</div>
</div>
<div class="image3">
<div class="img3">
<span class="ms3">3</span>
<span class="ms33">马化腾：腾讯将专注于做互联网...</span>
</div>
</div>
<div class="image4">
<div class="img4">
<span class="ms4">4</span>
<span class="ms44">IT领袖峰会圆桌会谈：互联网下...</span>
</div>
</div>
<div class="image5">
<div class="img5">
<span class="ms5">5</span>
<span class="ms55">微信支付对实体商业的价值几何？</span>
</div>
</div>
</div>
<div class="table">
<ul class ="box2">
<li><a href="###"><div class="six"></div>张小龙：小程序正式发布，开...</a></li>
<li><a href="###"><div class="seven"></div>马化腾：通向互联网未来的七...</a></li>
<li><a href="###"><div class="eight"></div>马化腾：腾讯现在只做两件事</a></li>
<li><a href="###"><div class="nine"></div>使用UE4制作VR内容的优化</a></li>
<li><a href="###"><div class="ten"></div>何凌南：谣言在想什么</a></li>
<!--三个#是不进行刷新，一个#是刷新-->
</ul>
</div>
</div>
</body>
</html>
百度云链接：http://pan.baidu.com/s/1nvsHArB 密码：xwfo
我什么也不想说了我只想睡觉😂
——来自于一个找不到好方法写代码的蠢boy
