【小练习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 ...
随机推荐
- Coordinator节点
Coordinator节点 Coordinator 节点主要负责segment 的管理和分配.更具体的说,它同通过配置往historical 节点 load 或者 drop segment .Coo ...
- C字符串输入输出函数
下面就几个常用的字符串输入输出函数做个小小的总结TAT 使用时添加头文件:#include<stdio.h>. scanf("格式控制字符串",变量地址列表):(pri ...
- script defer和async一探
今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异. 定义和用法 async 属性规定一旦脚本可用,则会异步 ...
- 【转载】 stm32之PWM
发现这位博主的博客被大量的转发,我也转载一篇,谁叫人家写的好呢. 原文地址:http://blog.sina.com.cn/s/blog_49cb42490100s6uh.html 脉冲宽度调制(PW ...
- BackgroundWorker的DoWork方法中发生异常无法传递到RunWorkedCompleted方法
在使用C#的BackgroundWorker时需要在UI界面上显示DoWork中发生的异常,但怎么调试都无法跳转到界面上,异常也不会传递到RunWorkerCompleted方法中(e.Error为空 ...
- bzoj 3028: 食物 -- 母函数
3028: 食物 Time Limit: 3 Sec Memory Limit: 128 MB Description 明明这次又要出去旅游了,和上次不同的是,他这次要去宇宙探险! 我们暂且不讨论他 ...
- 转csdn-css4
http://www.csdn.net/article/2015-03-06/2824127-css4
- LeetCode5. Longest Palindromic Substring 最长回文子串 4种方法
题目链接:https://leetcode.com/problems/longest-palindromic-substring/ 题意很简单,就是求一个字符串得最长子串,这里的子串指连续的. 本文给 ...
- Spring3.0配置多个事务管理器（即操作多个数据源）的方法
大多数项目只需要一个事务管理器.然而,有些项目为了提高效率.或者有多个完全不同又不相干的数据源,最好用多个事务管理器.机智的Spring的Transactional管理已经考虑到了这一点,首先分别定义 ...
- Java IO和NIO文章目录
1.java IO详尽解析 2.深入分析 Java I/O 的工作机制 3.InputStream类详解 4.OutputStream类详解 5.JAVA的节点流和处理流 6.FileInputStr ...