【小练习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 ...
随机推荐
- Keepalived高可用集群实践
(1)实践的硬件环境准备 准备4台物理服务器或者4台VM虚拟机,其中两台用来做Keepalived服务器,两台做web测试站点 HOSTNAME I P 解 释 lb01 10.0.0.7 K ...
- 通过bootloader向内核传输启动参数
作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Linux提供了一种通过bootloader向其传输启动参数的功能,内核开发者 ...
- 在Angular项目下使用Umeditor
Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本. 公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合.但是目前官方只提供Jsp ...
- 【算法系列学习】HDU 5527 Too Rich贪心
http://www.cnblogs.com/AOQNRMGYXLMV/p/4934747.html #include<iostream> #include<cstdio> # ...
- 用java实现大文件分割、排序、合并
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileNotFoundExcepti ...
- 原创-angularjs2不同组件间的通信
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...
- 新年伊始，.net菜鸟入院的第一篇随笔
学习.net有半年了,大二一年都是微软校园的负责人,但是因为根本没有系统的学习过编程的知识,所以一直都是活动负责人的身份,忙忙碌碌也没有什么收获,大三一狠心就退了,想能够踏踏实实的敲敲代码,手上的学习 ...
- Android库的标准化（不断更新中）
在Android的开发过程中,为了代码的通用性,模块化等原因,应该尽量将功能独立的,通用性高的模块抽离出来,建立单独的库.各个库的功能不同,但是同样作为库,依然有很多相通的地方. 各个库应该都应该遵循 ...
- 漫话JavaScript与异步·第二话——Promise：一诺千金
一.难以掌控的回调 我在第一话中介绍了异步的概念.事件循环.以及JS编程中可能的3种异步情况(用户交互.I/O.定时器).在编写异步操作代码时,最直接.也是每个JSer最先接触的写法一定是回调函数(c ...
- 转：MySQL表名不区分大小写
在LINUX下调一个程序老说找不到表,但是我明明是建了表的,在MYSQL的命令行下也可以查到,为什么程序就找不到表呢? 一.linux中mysql大小写详情: 1.数据库名严格区分大小写 2.表名严格 ...