html/css小练习1

代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 body,ul,dl,dd{margin:0;padding:0; font-family:"宋体";}
 8 li{ list-style:none;}
 9 a{ text-decoration:none;color:#4f6c84;}
10 img{ border:none; vertical-align:top;}
11 .clear{zoom:1;}
12 .clear:after{ content:"";display:block;clear:both;}
13 .wrap{width:445px;margin:30px auto;padding:12px 8px 0 7px; background:url(img/bg.gif) no-repeat 220px 0;}
14 .left{width:212px;float:left;}
15 .leftTop .pic{width:124px; background:url(pic5.png) no-repeat right 0;
16 padding-right:5px;float:left;}
17 .leftTop .pic a{border:1px solid #72B6F3; display:block; float:left; padding:3px;}
18 .leftTop dl{float:left; width:60px; padding-left:5px; font-size:12px; line-height:20px;
19 color:#B7CBF9;}
20 .leftBottom{padding-top:10px;}
21 .leftBottom li{font-size:12px; line-height:20px; padding-left:10px;
22 background:url(pic6.png) no-repeat 0 7px; }
23 .right{width:220px; float:right;}
24 .right li{width:100px; float:left;padding-left:10px;}
25
26 .right li a{ display:block;}
27 .right li img{border:1px solid #36C; padding:3px;}
28 .right strong{display:block; font-size:12px; line-height:24px; padding-top:3px; font:normal; text-align:center;}
29 </style>
30 </head>
31
32 <body>
33 <div class="wrap clear">
34     <div class="left">
35         <div class="leftTop clear">
36             <div class="pic">
37                 <a href="#">
38                     <img src="pic-1.png" />
39                 </a>
40             </div>
41             <dl>
42                 <dt><a href="#">潜伏</a></dt>
43                 <dd>导演:姜伟</dd>
44                 <dd>主演:姚晨 孙红雷</dd>
45             </dl>
46         </div>
47         <ul class="leftBottom">
48             <li><a href="#">海清张嘉译演绎房奴生活《蜗居》</a></li>
49             <li>
50                 <a href="#">琼瑶经典言情剧集锦</a>
51                 <a href="#">梦露电影知多少</a>
52             </li>
53         </ul>
54     </div>
55     <ul class="right">
56         <li>
57             <a href="#">
58                 <img src="pic-2.png" />
59                 <strong>将爱情进行到底</strong>
60             </a>
61         </li>
62         <li>
63             <a href="#">
64                 <img src="pic-3.png" />
65                 <strong>将爱情进行到底</strong>
66             </a>
67         </li>
68     </ul>
69 </div>
70
71
72 </body>
73 </html>

时间: 2024-11-09 19:32:34

html/css小练习1的相关文章

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果: 首先可以将html代码写出: 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">Lilt</a> 5 <a href="#"&g

css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂.而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了.这样不仅仅使代码明了,而且还会很省事,

纯CSS小三角制作

无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从border区域(不含border)开始向外裁剪背景. 3.content-box:从content区域开始向外裁剪背景. 4.text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果. ② clip auto:对象无剪切rect(<number>|aut

css小细节罗列

有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样的代码来设置绝对的行高.但是当我们的需求改变,字体大小变动的时候,可能我们还需要再次改动行高,那么现在我们可以使用直接设置数字来设置行高,当我们使用纯数字来设置行高的时候,它相对于的是字体大小的倍数,也就是说下面的h4其实设置的行高也是12*2px就是24px.这样设置的好处是当我们在改变字体大小的

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色

css小技巧(1)

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s

Css 小技巧总结

相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决! css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小. img { max-width: 163px; width:expression(this.width > 163

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器