您的位置：首页 > Web前端 > CSS

任务五：零基础HTML及CSS编码（二）

2017-03-21 00:01 302 查看

网页预览效果：http://zhulf.com/baiduweb/xw/task5/

HTML代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>小薇学院task2</title>

<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div class="header">
<div class="logo"><img src="logo.jpg" /></div>
<div class="menu">
<ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a class="gray" href="#">导航链接四</a></li>
</ul>
</div>
</div>

<div class="container">
<div class="sidebar">
<h3>这里以后是一个侧栏，这是侧栏的标题</h3>
<form>
<p><span class="left">请输入邮箱地址</span><input type="text" placeholder="这是一个文本输入框" /></p>
<p class="notice-row"><span class="left"></span><span class="notice">邮箱地址请按要求格式输入</p>
<p><span class="left">请输入密码</span><input type="password" placeholder="请输入密码" /></p>
<p><span class="left">请重复输入密码</span><input type="password" placeholder="请重复输入密码" /></p>
<p class="notice-row"><span class="left"></span><span class="notice">密码为6-16位英文数字</span></p>
<p><span class="left">性别</span><span>男</span><input name= "sex" type="radio" checked /><span>女</span><input name="sex" type="radio" /></p>
<p><span class="left">城市</span><select>
<option><span>北京</span></option>
<option><span>上海</span></option>
<option><span>广州</span></option>
</select>
</p>
<p><span class="left">爱好</span><input type="checkbox" name="habit" /><span>运动</span><input type="checkbox" name="habit" />
<span>艺术</span><input type="checkbox" name="habit" /><span>科学</span></p>
<p>
<span class="left textarea">个人描述</span><textarea>这是一个多行输入框，输入您的个人描述</textarea>
</p>
<p class="submit"><input type="button" value="确认提交" /></p>
</form>
</div>

<div class="content">
<div class="article">
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<p class="jianjie">文章作者文章发表时间</p>
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
换行了</p>
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，<a href="#">这里有一个链接链接到http://ife.baidu.com</a>
这是一个很长很长的段落，这是一个很长很长的段落，这里有个<b>粗体字</b>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
<img src="test.jpg" />
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
换行了</p>
<p class="suojin">
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，
这是一个很长很长的段落，<a href="#">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落。
</p>
</div>
<div class="article">
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<p class="jianjie">文章作者文章发表时间</p>
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
换行了</p>
<p class="suojin">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
</p>
<img src="test.jpg" />
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
</div>

<div class="photos">
<h2>图片</h2>
<ul>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<li><p>好看的图片</p><img src="test.jpg" /></li>
<div class="clear"></div>
</ul>
</div>

<div class="article bottom-article">
<h2>最后一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<p class="jianjie">文章作者文章发表时间</p>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<div class="table">
下面是一个表格，给表头加了一个cellspacing="0",看起来更加美观<br />
<table cellspacing="0";>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总计</td>
<td colspan='2'>1000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</div>

<div class="footer">
<p>版权所有©zhulf</p>
</div>
</body>
</html>

CSS代码：
*{
margin: 0;
padding: 0;
}
body{
background: #dedede;
}
p{
line-height: 26px;
}
.clear{
clear: both;
}
/*header部分*/
.header{
height: 60px;
background: #333;
}
.header .logo{
float: left;
margin: 10px 0 0 40px;
}
.header .menu{
float: right;
margin: 20px 20px 0 0;
}
.header .menu li{
float: left;
margin-left: 20px;
}
.header .menu a{
color: #f1edea;
text-decoration: none;
}
.header .menu .gray{
color: #9fa4aa;
}

/*container部分*/
.container{
padding: 20px;
}

/*content部分*/
.content{
margin-right: 380px;
}
.article,.photos{
padding: 40px 20px 20px 20px;
background: #fff;
margin-bottom: 20px;
}
.bottom-article{
margin-bottom: 0;
}
.article h2, .photos h2{
font-size: 20px;
margin-bottom: 22px;
}
.article h3{
font-size: 14px;
color: #706865;
}
.article .jianjie{
font-size: 10px;
color: #635d81;
margin: 18px 0 20px 0;
}

p.suojin{
text-indent: 2em;
}
.article img{
display: block;
margin: 22px 0 20px 0;
border: 1px solid #ccc;
}
.article ul li{
list-style: none;
line-height: 28px;
}

.article li{
margin-top: 14px;
margin-left: 22px;
}
.article .table{
margin-top: 22px;
}

.article table{
width: 100%;
border-right: 1px solid #ccc;
}

.article table thead{
background: #333;
text-align: left;
color: #fffcee;
}

.article th, .article td{
padding: 4px 0 6px 5px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.article tfoot tr{
background: #ccc;
}

.photos{
padding-bottom: 10px;
}
.photos p{
text-align: center;
margin-bottom: 10px;
font-size: 12px;
line-height: 12px;
}
.photos ul{
margin-left: 8px;
}
.photos li{
height: 104px;
width: 100px;
border: 1px solid #ccc;
float: left;
padding: 10px;
list-style: none;
margin-right: 18px;
margin-bottom: 18px;
}
.photos img{
width: 104px;
height: 80px;
}

/* sidebar部分 */
.sidebar{
width: 320px;
float: right;
background: #fff;
padding: 20px;
}
.sidebar h3{
padding: 8px 0 8px 10px;
border-left: #cacaca solid 4px;
font-size: 16px;
margin-bottom: 10px;
}
.sidebar p{
margin-bottom: 10px;
line-height: 14px;
}
.sidebar span{
font-size: 12px;
margin-right: 4px;
}
.sidebar .left{
display: inline-block;
width: 96px;
text-align: right;
margin-right: 12px;
font-size: 12px;
}
.sidebar input{
font-size: 12px;
padding: 2px;
}
.sidebar .notice-row{
color: #97a7a7;
font-size: 12px;
margin-bottom: 25px;
}
.sidebar .textarea{
vertical-align: top;
}
.sidebar textarea{
width: 206px;
height: 96px;
}
.sidebar .submit{
margin-bottom: 0;
}
.sidebar .submit input{
width: 100%;
height: 36px;
background: #3355d0;
color: fffffd;
border-radius: 10px;
}

/*footer部分*/
.footer{
background: #000000;
color: #f9ffef;
text-align: center;
padding: 20px 0 36px 0;
}
github地址：https://github.com/zhulf0804/baiduweb/tree/master/xw/task5

笔者也是前端菜鸟，正在学习实践，写的不好的地方欢迎大家指正~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航