html/css小练习2

效果图：

代码如下：

 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,h2,h3,p{margin:0;padding:0; font-family:"宋体";}
 8 li{ list-style:none;}
 9 img{ border:none; vertical-align:top;}
10 a{ text-decoration:none;}
11 .wrap{width:366px; margin:30px auto;}
12 .head{background:url(headBg.gif) no-repeat; height:37px;}
13 .title{font-size:12px; line-height:22px; color:#294852; background:url(pic4.png) no-repeat 6px 4px; padding-left:30px;}
14 .list{ padding:0px 7px 2px 5px;}
15 .clear{zoom:1;}
16 .clear:after{content:""; display:block; clear:both;}
17 .list .li{vertical-align:top; padding:12px 0 9px 0;}
18 .list .pic{width:95px; height:60px; float:left;border:1px solid #c8c4d3;padding:2px;background:#fff;}
19 .list .text{ width:239px; float:right;}
20 .list .text h3{font-size:12px; line-height:24px;}
21 .list .text p{font-size:12px; line-height:20px; color:#666666;}
22 .list .text a{color:#666666;}
23 </style>
24 </head>
25 <div class="wrap">
26     <div class="head">
27     <h2 class="title">外媒评论精选</h2>
28     </div>
29     <ul class="list clear">
30         <li class="li clear">
31         <a href="#" class="pic">
32             <img src="pic1.png" />
33         </a>
34         <div class="text">
35         <h3>《加勒比海盗4》--商业味浓郁</h3>
36         <p>本集《加勒比海盗》讲述了杰克船长受英王所托“不老泉”，与他...[<a href="#">详细</a>]</p>
37         </div>
38         </li>
39         <li class="li clear">
40         <a href="#" class="pic">
41         <img src="pic2.png" />
42         </a>
43         <div class="text">
44         <h3>《加勒比海盗4》--商业味浓郁</h3>
45         <p>本集《加勒比海盗》讲述了杰克船长受英王所托“不老泉”，与他...[<a href="#">详细</a>]</p>
46         </div>
47         </li>
48         <li class="li clear">
49         <a href="#" class="pic">
50         <img src="pic3.png" />
51         </a>
52         <div class="text">
53         <h3>《源代码》--科幻与惊悚完美结合</h3>
54         <p>《源代码》杰克杰伦哈米歇尔莫纳汉、维拉法梅加主演。...[<a href="#">详细</a>]</p>
55         </div>
56         </li>
57     </ul>
58 </div>
59 <body>
60 </body>
61 </html>

View Code

转载于:https://www.cnblogs.com/baoweiluobo/p/5848106.html

html/css小练习2相关推荐

css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
css 小知识点：inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
HTML5支持rpx,css小程序的元素尺寸单位px，rpx及rem
css小程序的元素尺寸单位px,rpx及rem的简明理解.0b7d08f 做小程序和做网页是不一样的.需要理解换算一下单位.fcb0b 0b7d08f rpxa741a29f 微信小程序单位,小程序规 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文阿里矢量图标 day0 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
html+css小名片代码
作者:小刚一位苦于信息安全的萌新小白帽,记得关注给个赞,谢谢本实验仅用于信息防御教学,切勿用于其它用途 HTML+css小名片效果效果图小名片代码学习html+css时做的小名片案例. 效果 ...

html/css小练习2

html/css小练习2相关推荐

最新文章

热门文章