妙味课堂HTML课后练习 03 lesson 虾米

效果图

清除默认样式

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input,select, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */
{  margin: 0;  padding: 0;}/** 重置列表元素 **/
ul, ol { list-style: none; }/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }/** 设置默认字体 **/
body,button, input, select, textarea /* for ie */
{  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//** 重置表单元素 **/
legend { color: #000; }/* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 *//** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>虾米</title><link rel="stylesheet" href="clear defult sytle.css"><style>.box{height: 285px;width: 659px;/*border: 1px solid violet;*/margin: 30px auto;}header{border-bottom: 1px solid #c7c7c7    ;}header p{font: 15px/31px 楷体;color: black;}.head-tit{float: left;padding-top: 12px;padding-left: 7px;}.head-R{float: right;color: #7e7e7e;padding-top: 12px;padding-right: 25px;}.phase>li{border-bottom:1px solid #c7c7c7 ;padding: 10px 15px 10px 7px;}.pic{float: left;padding-right: 10px;}.auth{float: left;}.auth li{font: 12px/24px 楷体;}.clear:after{content:"";display:block;clear:both;}</style>
</head>
<body>
<div class="box"><header class="clear"><p class="head-tit">最新原创精选集</p><a href="#" class="head-R">更多</a></header><ul class="phase"><li class=" clear"><a href="#" class="pic"><img src="05.png" alt="05"></a><ul class="auth"><li><a href="#" style="font: 15px/23px 楷体">形SHAPE状</a>(13)</li><li>制作人：<a href="#">柔清梦</a> @2012-11-02</li><li>幸福的形状，爱情的形状，感情的形状都是什么形状？圆形？三角形？四边形？</li></ul></li><li class=" clear"><a href="#" class="pic"><img src="05.png" alt="05"></a><ul class="auth"><li><a href="#" style="font: 15px/23px 楷体">形SHAPE状</a>(13)</li><li>制作人：<a href="#">柔清梦</a> @2012-11-02</li><li>幸福的形状，爱情的形状，感情的形状都是什么形状？圆形？三角形？四边形？</li></ul></li></ul>
</div></body>
</html>

妙味课堂HTML课后练习 03 lesson 虾米相关推荐

妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
php 视频分享 h5,妙味课堂HTML5视频资料分享
万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准.外语原文:W3C Recommendation.见本处参考资料原文内容:). 2014年10 ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
倒计时妙味课堂_jQuery实现倒计时（倒计时年月日可自己输入）
$(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = " ...
妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享
<妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...
妙味课堂cctv移动端项目
2019独角兽企业重金招聘Python工程师标准>>> 项目介绍妙味课堂仿cctv项目移动端准备工作 viewport 这里根据psd,宽度为640,所以使用了下面的meta & ...
妙味课堂 - 前端初窥 -
Ps技术 - 切图测量测量:F8.信息面板切图(抠图) command + c 复制 command + n 新建同等大小纸张 command + d 粘贴 command + s 保存 css ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂WEB前端开发全套教程无加密版
妙味课堂WEB前端开发全套视频教程无加密版下载地址:百度网盘

妙味课堂HTML课后练习 03 lesson 虾米

妙味课堂HTML课后练习 03 lesson 虾米相关推荐

最新文章

热门文章