【小练习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 ...
随机推荐
- sql解析xml
我们有时候需要在sql中解析xml,xml解析sql实例如下: DECLARE @params xml DECLARE @customparams xml = null -- 0.解析输入参数 ...
- linux网口绑定笔记-bind
模式0:balance-rr 模式1:active-backup 模式2:balance-xor 模式3:broadcast 模式4:802.3ad 模式5:balance-tlb 模式6:balan ...
- 任务十二：学习CSS 3的新特性
任务目的 学习了解 CSS 3 都有哪些新特性,并选取其中一些进行实战小练习 任务描述 实现 示例图(点击查看) 中的几个例子 实现单双行列不同颜色,且前三行特殊表示的表格 实现正常状态和focus状 ...
- require.js+bootstrap实现简单的页面登录和页面跳转
小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <he ...
- 八种创建等高列布局【出自w3c】
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
- 今天开始上Linux运维课。
2017年4月25日,北京.沙河老男孩教育,Linux运维. 我是其中一员,希望顺利!
- MySQL安装、输入密码闪退、workbench使用
1.安装 安装就不细说了,网上一搜一大堆,但是教程推荐这个: wikihow 网站是wikiHOW,很有意思的网站,比百度经验强大很多. 2.输入密码闪退 安装完成后,在开始菜单,打开 开始程序 界面 ...
- 使用了UnityEditor中的API，打包时却不能打包UnityEditor的问题
前段时间写了一篇名叫<Unity使用Windows弹窗保存图片>的文章 然而现在项目进入了测试阶段 就在发布的时候,这个地方出问题了 问题出在using UnityEditor; 如上文章 ...
- 阿里云主机试用之自建站点和ftp上传所遇的2个问题
1.Access to the requested object is only available from the local network 其实我并没有自建站点,只是使用了XAMPP来建了ap ...
- django restframework serializer 增加自定义字段
在使用django restframework serializer 序列化在django中定义的model时,有时候我们需要额外在serializer中增加一些model中没有的字段.有两种方法实现 ...