【小练习06】HTML+CSS--电影公告
要求实现如下效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h3,h4,p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
section{
width: 310px;
}
section h3{
height: 28px;
background: url(images/head_bg.gif);
font: bold 12px/28px '宋体';
color: #4c5354;
padding-left: 38px;
}
.imgWrap{
height: 131px;
margin: 14px 0;
}
.imgLink{
float: left;
}
.imgWrap img{
padding: 2px;
margin-right: 12px;
border: 1px solid #c8c4d3;
}
.imgWrap div{
float: left;
width: 176px;
}
.imgWrap div h4{
height: 27px;
line-height: 27px;
}
.imgWrap div h4 a{
font-size: 12px;
color: #333;
}
.imgWrap div span,.imgWrap div p{
font: 12px/20px "宋体";
display: block;
color: #666;
}
section li{
height: 22px;
font: 12px/22px "宋体";
background: url(images/ico_01.gif) no-repeat 17px 9px;
padding: 0 18px 0 31px;
}
section li a{
color: #333;
}
section li span{
color: #888;
float: right;
}
</style>
</head>
<body>
<!--
划分结构
1、看边框
2、看距离
3、看颜色块
4、看背景图片
结构书写的顺序：从上到下，从左往右
h1 首先，一个页面中只能有一个h1标签，整个页面中找到大标题。如果没有的话，可以选择给logo
浮动
1、如果想让两个元素在一行中显示，就用浮动
2、用完了必需要清，给父级加清除浮动
一行中所有的元素都浮动了，如果换行的话，那就是父级的宽度不够了
-->
<section>
<h3>明星荐片</h3>
<div class="imgWrap clearfix">
<a href="#" class="imgLink"><img src="data:images/img_01.jpg" alt="" /></a>
<div>
<h4><a href="#">让子弹飞一会</a></h4>
<span>导演：姜文</span>
<span>主演：姜文 姜文 姜文</span>
<p>点评：我最近喜欢的要算我最近喜欢的要算我最近喜欢的要</p>
</div>
</div>
<ul>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
</ul>
</section>
</body>
</html>
【小练习06】HTML+CSS--电影公告的更多相关文章
- WordPress小工具开发教程（网站公告）
WordPress小工具开发教程(网站公告) BY TIANQIXIN · 2012 年 12 月 26 日 wordpress主题小工具,可以自由拖动到侧边栏,并在前台实现相应功能!一般自带的小 ...
- 小奶狗给小喵咪上CSS课程
小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...
- 微信小程序开发(3) 热门电影
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成, ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
- SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用
通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 微信小程序实例--仿豆瓣电影
最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
随机推荐
- js原型二
function Box(name,age){ this.name = name; this.age = age; this.family = ['哥哥',‘姐姐’,‘妹妹’]: } Box.prot ...
- lua 字符串
lua 字符串 语法 单引号 双引号 "[[字符串]]" 示例程序 local name1 = 'liao1' local name2 = "liao2" lo ...
- Unity 脚本中各种[XXX]的用法
1.[SerializeField]在Inspector中显示非public属性,并且序列化:若写在public修饰的字段前,相当于没写,Unity会自动为Public变量做序列化,序列化的意思是说再 ...
- 多个git账号的SSH配置
一般使用git都只需要维持一个默认的git账户就可以打天下了. 但如果自己确实需要多个git账号的需求的话,就有必要配置多个ssh key了. 首先为生成多个ssh key ssh-keygen -t ...
- Mac IDEA插件——protobuf 插件
最近在搞PB的版本的升级,历史的PB的版本是2.4,现在是打算升级到3.2,当面PB的版本肯定有很多变化了,就不再这里多说了,这里重点说一说,采用IDEA的插件方便执行PB的文件的JAVA编译,这样的 ...
- 【知识必备】浅淡MVP在Android项目中的实战演习，让代码结构更简单~
一.写在前面 讲道理,这次是真的笔者很久都没有更新blog了,主要最近维护的框架问题也是层出不穷,而且对技术交流群的解答也让我身心疲惫,所以在这里跟关注我的人说声抱歉,没有定期给你们带来福利,那么这里 ...
- 微软的STRIDE模型
微软的STRIDE模型: https://msdn.microsoft.com/en-us/library/ee823878(v=cs.20).aspx Spoofing identity. An e ...
- 【代码学习】PHP中GD库的使用
PHP--GD库 ================================================ 一.支持: 需要php支持GD库 二.作用: 验证码.水印.缩放等 三.绘画步骤: ...
- codeforces 803C Maximal GCD(GCD数学)
Maximal GCD 题目链接:http://codeforces.com/contest/803/problem/C 题目大意: 给你n,k(1<=n,k<=1e10). 要你输出k个 ...
- 如何高效的进行WebService接口性能测试
版权声明:本文为原创文章,转载请先联系并标明出处 关于接口测试的理解,主要有两类,一类是模块与模块间的调用,此类接口测试应该归属于单元测试的范畴,主要测试模块与模块之间联动调用与返回.此类测试大多关注 ...