要求实现如下效果图：

代码演示

<!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>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840935

【小练习06】HTML+CSS--电影公告的更多相关文章

  1. WordPress小工具开发教程（网站公告）

    WordPress小工具开发教程(网站公告) BY TIANQIXIN · 2012 年 12 月 26 日   wordpress主题小工具,可以自由拖动到侧边栏,并在前台实现相应功能!一般自带的小 ...

  2. 小奶狗给小喵咪上CSS课程

    小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...

  3. 微信小程序开发(3) 热门电影

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成, ...

  4. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  5. 前端小白页面开发注意事项及小工具（html\css\js）

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  6. SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

    通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...

  7. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  8. 微信小程序实例--仿豆瓣电影

    最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...

  9. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

随机推荐

  1. Eclipse 中 Java 项目中 .settings 文件夹作用

    今天工作时,因对 .settings 文件夹误操作,耗时 6 个多小时,才了解到原因就出在 .settings 文件夹.经查阅资料,对 .settings 做如下整理: 就如setting这个名字,就 ...

  2. 分享我的学习记录 svn地址

    地址:svn://121.42.160.2/myproject 用户名:scaner 密码:zhinengkan 这个用户只有读权限,没有修改的权限,如果有什么建议或代码中有不对的地方,欢迎再留言中告 ...

  3. 【小瑕疵】表单中的button会自动提交？

    在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...

  4. 1.2 N层架构

    N层架构 介绍 ABP架构 其他(通用) 领域层 应用层 基础设施层 网络和展现层 其他 总结 介绍 应用程序代码库的分层架构是被广泛认可的可以减少程序复杂度.提高代码复用率的技术.为了实现分层架构, ...

  5. 用js+cookie实现商城的购物车功能

    页面上的添加功能主要就是两个按钮 <input name="buy" type="image" alt="第一个商品" src=&qu ...

  6. rapidPHP 下载并安装

    安装 rapidPHP对运行环境的要求 php 5.4以上,包括5.4,支持php7,依赖包,php-curl,php-mysql,php-gd 官网下载 http://rapidphp.gx521. ...

  7. 好久没发贴了，最近捣鼓了个基于node的图片压缩小网站解析。

    看了下,距离上次发帖都是去年10月份的事,忙于工作的我很少跑博客园里面来玩了. 做这个小网站的初衷是 https://tinypng.com/ 这个网站有时候访问很慢,然后自己去研究了下图片压缩. 网 ...

  8. 如何修改dmesg log buffer size

    CONFIG_LOG_BUF_SHIFT: Kernel log buffer size (16 => 64KB, 17 => 128KB) General informations Th ...

  9. hdu4171 Paper Route 树的性质+DFS

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4171 题意: 有n+1个点,这n+1个点由n条边相连,且保证连通.然后给出各个点到出口的距离,要求从 ...

  10. 在Windows上安装MongoDB

    原文官方文档:https://docs.mongodb.org/v2.6/tutorial/install-mongodb-on-windows/ 基于版本:MongoDB 2.6 概览 通过这个示例 ...