【小练习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 ...
随机推荐
- 为部署ASP.NET Core准备：使用Hyper-V安装Ubuntu Server 16.10
概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...
- 网站启用gzip压缩
gzip压缩启用不启用还是要看实际情况的,启用gzip后可以相应的减轻带宽压力但是同时也会增加cpu的压力(压缩解压),相反的如果不启用那么cpu压力也会相应的减少,具体情况具体分析. Linux开启 ...
- tcp并发服务端
TCP并发服务器:并发服务器的思想是每一个客户端的请求并不由服务器的主进程直接处理,而是服务器主进程创建一个子进程来处理. 创建TCP并发服务器的算法如下: socket(……): //创建一个TCP ...
- THINKPHP3.2 中使用 soap 连接webservice 解决方案
今天使用THINKPHP3.2 框架中开发时使用soap连接webservice 一些浅见现在分享一下, 1.首先我们要在php.ini 中开启一下 php_openssl.dll php_soap. ...
- xmlplus 组件设计系列之五 - 选项卡
这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...
- DirectFB 之 分段动画
动画动态配置 一套素材的目录结构一般如下: 子目录中的图片名称都是以数字命名,比如,1,2, 3, 4,-- 而配置文件animation.cfg的格式如下: #width height ...
- JVM 方法调用之动态分派
1. 动态分派 一个体现是重写(override).下面的代码,运行结果很明显. public class App { public static void main(String[] args) { ...
- jquery通过ajax向后台发送（checkbox）数组，并在后台接收，（发送的数据是checkedbox）
版权声明:本文为博主原创文章,未经博主允许不得转载. $(document).ready(function(){ var flag = 1; $("#delBtn").click( ...
- Play学习 - 体验网页模板
在经过无数个尝试后,最终用sbt把play所依赖的所有包都下载下来了,现在可以非常快速编译运行了.今天体验了下网页模板,觉得非常不错,在这里做个简单的介绍. 原文说明: A Play Scala te ...
- .net 程序集
前言:用了几天的时间把高级编程里面程序集一章看完了,原来自己只知道写代码,右键添加引用,从来也不知道操作的实质是什么,微软总是这个套路,鼠标点点就能把任务完成,这对新手友好但是对要通透了解程序执行和内 ...