CSS（5.12+5.13）
2017-05-13 本文已影响0人
张博一
myfirstwebpage.css
太心酸了。。。。。调格式调半天调不好。。。。心都碎了，尤其最后一页的效果太折磨人了。。。。。
body {
font-family: "Open Sans", sans-serif;
}
.container{
background-color:bisque;
}
.header{
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
height: 60px;
line-height: 60px;
text-align: middle;
background-color:dimgray;
}
h1{
display:inline;
}
.daohang{
float right;
display: inline;
}
.daohang ul{list-style:none;margin:0;padding:0;display:inline;float: right;color: #000;}
.daohang li{margin-right:8px;display:inline;color:bisque;}
.page{
border:1px solid #cccccc;
margin: 10px;
padding: 10px;
box-shadow: 1px 1px 2px #226
}
.page p{
text-indent:2em;
}
.page h2,h3,h5{
font-family: 微软雅黑
}
.page h3{
color:#666;
}
.page h5{
color:#999;
}
#box1{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box2{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 10px;
}
#box3{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box4{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin:10px;
}
#box5{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box6{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin:10px;
}
ol{
font-family:微软雅黑;
font-weight: bold;
}
table{
border: 0.5px #ccc solid;
width: 90%;
margin:auto;
font-family:微软雅黑;
}
th{
background-color:#333;
color: aliceblue;
padding: 5px;
text-align: left;
}
tfoot{
background-color: #ccc;
font-weight: bold;
color: white;
}
.pagelast h2{
border-left: solid #ccc 5px;
padding-left: 10px;
text-align: left;
}
.pagelast{
text-align: center;
}
input{
width: 150px;
}
.duiqi2{
color: #666;
font-size:7px;
font-family: 微软雅黑;
display: inline-block;
margin-top: 0;
margin-left: 120px;
}
.icon{
width:800px;
margin:0;
background-color: #000099;
color:aliceblue;
height: 40px;
border-radius: 10px;
}
#teshu{
display: inline-block;
width:150px;
text-align: left;
}
#teshu2{
display: inline-block;
width:150px;
text-align: left;
}
.1{
line-height: 20px;
}
lable{
display: inline-block;
width:150px;
text-align:right;
}
html相应文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">LOGO</h1>
<div class="daohang">
<ul>
<li> <a href="http://www.w3school.com.cn/">导航链接一</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接二</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接三</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接四</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="page">
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<h5>文章作者 文章发表时间</h5>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a><b> 这是一个加粗</b>这是一个很长的段落 这是一个很长的段落<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <b>这里有个粗体字</b> 这是一个很长的段落 这是一个很长的段落 <a href="www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p></div>
<div class="page">
<h2>另一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落<br /></p>
<img src ="3.jpg" width="300" height="200">
<ul>
<li> 列表一</li>
<li> 列表二</li>
<li> 列表三</li>
</ul></div>
<div class="page">
<h2>图片</h2>
<div class="pic">
<div id="box1">
好看的图片</div>
<div id="box2">
</div>
<div id="box3">
好看的图片</div>
<div id="box4">
<img src ="3.jpg" width="200" height="200">
</div>
<div id="box5">
好看的图片</div>
<div id="box6">
<img src ="3.jpg" width="200" height="200">
</div>
</div>
</div>
<div class="page">
<h2>最后一篇文章一级标题</h2>
<h3>
文章二级标题
</h3>
<h5>文章作者 文章发表时间</h5>
<ol>
<li>排名一</li>
<li>排名二</li>
<li>排名三</li>
</ol>
<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tfoot>
<td>总计</td>
<td colspan="2">100</td>
</tfoot>
</table></div>
<div class="page">
<div class="pagelast">
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
<div class="1">
<lable >请输入邮箱地址</lable>
<input type="text" name="邮箱地址" value="这是一个文本输入框"></div>
<p class="duiqi2">
邮箱地址请按格式要求输入 </p>
<div class="1">
<lable>请输入密码</lable>
<input type="password" name="密码输入框" value="这是一个文本输入框"></div>
<div class="1">
<lable>请重复输入密码</lable>
<input type="password" name="mima" value="这是一个文本输入框"></div>
<p class="duiqi2">
密码请为6-16位英文数字
</p>
<div class="1">
<lable>性别</lable>
<div id="teshu">
<input type="radio" name="sex" value="女" style="width:10px" checked >女
<input type="radio" name="sex" value="男" style="width:10px">男<br></div></div>
<div class="1">
<lable>城市</lable>
<div id="teshu2">
<select name="城市" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="杭州">杭州</option>
</select><br></div></div>
<div class="1">
<lable>爱好</lable>
<input type="checkbox" name="艺术" value="艺术" style="width:10px;">艺术
<input type="checkbox" name="运动" value="运动" style="width:10px;">运动
<input type="checkbox" name="科学" value="科学" style="width:10px;">科学<br></div>
<div class="1">
<lable>个人描述</lable>
<textarea name="a" style="width:150px;height:30px;vertical-align:top">这是一个多行输入框请在这里输入内容</textarea><br></div>
<input class="icon" type="submit">
</div>
<div class="footer">
</div>
</body>
</html>```
#实现效果展示
查看效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634
