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

来源：互联网发布：合肥博然软件怎么样编辑：程序博客网时间：2024/05/15 08:20

效果预览链接：http://zhulf.com/baiduweb/xw/task2/

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="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></ul></div><div class="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 class="sidebar sidebar-top"><h3>这里以后是一个侧栏，这是侧栏的标题</h3><form><p><span class="left">请输入邮箱地址</span><input type="text" placeholder="这是一个文本输入框" /></p><p><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><span class="left"></span><span class="notice">密码为6-16位英文数字</span></p><p><span class="left">性别</span>男<input name= "sex" type="radio" checked /> 女<input name="sex" type="radio" /></p><p><span class="left">城市</span><select><option>北京</option><option>上海</option><option>广州</option></select></p><p><span class="left">爱好</span><input type="checkbox" name="habit" />运动<input type="checkbox" name="habit" />艺术<input type="checkbox" name="habit" />科学</p><p><span class="left textarea">个人描述</span><textarea>这是一个多行输入框，输入您的个人描述</textarea></p><p class="submit"><input type="button" value="确认提交" /></p></form></div><div class="footer"><p>版权所有&copy;zhulf</p></div></body></html>

CSS代码如下：

*{margin: 0;padding: 0;}body{background: #dedede;}p{line-height: 26px;}/*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;}/*content部分*/.article, .photos, .sidebar{background: #fff;margin: 20px;padding: 40px 20px 20px 40px;}.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: black;margin: 22px 0 20px 0;}.article ul li{list-style: none;line-height: 28px;}.photos li{border: 2px solid #cecece;padding: 10px;margin-bottom: 14px;width: 200px;height: 200px;list-style: none;margin-left: 36px;}.photos p{text-align: center;margin-bottom: 10px;}.photos img{width: 80%;height: 80%;display: block;margin: auto;}.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;}/*sidebar部分*/.sidebar-top{padding-top: 20px;margin-top: 40px;}.sidebar h3{padding: 10px 0 12px 10px;border-left: #cacaca solid 2px;}.sidebar p{margin-left: 150px;margin-bottom: 10px;}.sidebar .left{display: inline-block;width: 200px;text-align: right;margin-right: 12px;}.sidebar .notice{color: #97a7a7;}.sidebar .textarea{vertical-align: top;}.sidebar textarea{width: 760px;height: 100px;}.sidebar .submit{margin-left: 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/task2

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

0 0