css怎么写这个样式，新手 可以用图片代替帮忙写一个_百度知道
css怎么写这个样式，新手 可以用图片代替帮忙写一个
帮忙写个手机上用的自适应的那种
我有更好的答案
这种属于网站上常见的玩意，不难。你随便找个网站看看他的html和css代码，自己弄懂原理，会比别人给你代码强一万倍。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。这是一个html5/css网站，gallery.html这个网页上部自动切换图片的 功能有问题，手动点下一张也不行！！！_百度知道
这是一个html5/css网站，gallery.html这个网页上部自动切换图片的 功能有问题，手动点下一张也不行！！！
求大神帮改一下代码，使gallery.html这个网页上部的图片能自动切换。about.html这个页面的图片就能自动切换，可以给您提供参考。谢谢！我自己试着改没改好，请大神改好后在传给我，这个压缩文件4M传不上去，请大神们留个email，我把文件发给你们，万分感谢~
我有更好的答案
&script&language&=javascript&&var&curIndex=10;&&&&&&//时间间隔(单位毫秒)var&timeInterval=1000;var&arr=new&Array();arr[0]=&1.jpg&;&&&&&&&&&&//这里开始放图片位置和图片名称arr[1]=&2.jpg&;arr[2]=&3.jpg&;arr[3]=&4.jpg&;arr[4]=&5.jpg&;setInterval(changeImg,timeInterval);function&changeImg(){var&obj=document.getElementById(&obj&);if&(curIndex==arr.length-1)&{curIndex=0;}else{curIndex+=1;}obj.src=arr[curIndex];}&/script&&img&id=obj&src&=&photos/1.jpg&&width=200&height=150&border&=0&就这个吧，把这个复制到HTML文件里面，这个是JS程序。CSS没有这个功能。实在不会你把文件发给里面，然后这里追问。
采纳率：53%
为您推荐：
其他类似问题
html5的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。div盒子在一行的css布局方法
默认情况下是独占一行的，设置依然盒子也独占一行，那么如何使用css让div盒子在一行呢？
div排成一排方法有二，第一种采用，第二种采用实现。
一、css浮动让div一行
对div设置float浮动样式即可，让div排成一行，只要要排成一行div盒子宽度之和小于或等于上一级（父级）那么再多div盒子都会排成一排。
1、实现实例HTML+代码
&!DOCTYPE html&&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&title&float让div盒子排一行 www.thinkcss.com&/title&&style&.float-div{ }&/style&&/head&&body&&div&没有设置CSS&/div&&div&没有设置CSS&/div&&div class=&float-div&&设置float&/div&&div class=&float-div&&设置float&/div&&div class=&float-div&&设置float&/div&&/body&&/html&
2、效果截图
成功实现float让div盒子在一行
二、css display让div盒子不换行在一行
一般对div盒子设置display:inline即可让其不换行在一排，仍然如果要想多个div盒子在一行，除了设置display外，还需要宽度小于或等于父级宽度这一条件。
1、div在一行实例代码
&!DOCTYPE html&&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&title&display让div盒子不换行 www.thinkcss.com&/title&&style&.display-div{ display:inline}&/style&&/head&&body&&div&没有设置CSS&/div&&div&没有设置CSS&/div&&div class=&display-div&&设置display&/div&&div class=&display-div&&设置display&/div&&div class=&display-div&&设置display&/div&&/body&&/html&
div排成一排 不换行
根据需求选择div盒子不换行在一行方法，通常布局分为左右结构div两个盒子，采用float比较多，三列DIV在一行，也是对第一和第二个div设置float:left，对第三个div设置float:right达到三个div盒子在一行的三列布局。
三、实际布局应用
通常html网页布局时候，三列布局比较多，以下是div布局的简单三列实现，采用float浮动实现三个div排一排，形成左中右结构布局。
1、完整css div代码
&!DOCTYPE html&&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&title&div三列布局 www.thinkcss.com&/title&&style&#thinkcss{width:400 overflow:hidden}.left-a{ float: width:120 :1px solid #F00}.left-b{ float: width:130 border:1px solid #000; margin-left:7px}.right{ float: width:130 border:1px solid #F00}&/style&&/head&&body&&div id=&thinkcss&&&div class=&left-a&&左边第一个DIV&br&文字内容&/div&&div class=&left-b&&中间一个DIV&br&文字内容&/div&&div class=&right&&右边一个DIV&br&内容文字&/div&&/div&&/body&&/html&
以上代码可直接复制测试。
2、div css实例截图
使用布局左中右结构框架
相关标签：
如需转载，请注明文章出处和来源网址：
日期： 10:34:57 来源：www.thinkcss.com 作者：thinkcss原创用div+css布局 图片如何显示在左上角 文字不覆盖 像这样的如图_百度知道
用div+css布局 图片如何显示在左上角 文字不覆盖 像这样的如图
我有更好的答案
设置一个图片的浮动应该可以，请测试：&style type=&text/css&&#divimg{ font:14 border:1px solid #666; width:200 padding:5 }#divimg img{ border:0 float: }&/style&&div id='divimg'&&img src=&test/t.jpg& /&如何预防感染H7N9禽流感？1、不接触、不食用病(死)禽、畜肉，不购买无检疫证明的鲜、活、冻禽畜。 等均要洗手等。&/div&
采纳率：40%
图片设置成左对齐就行
将图片设置成内联元素，inline
其他1条回答
为您推荐：
其他类似问题
div的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。HTML+CSS＝无限可能——案例详解：我的POI主题作品
在微博发了这个作业，收到很多好评，实在太开心！
斌叔让我来投稿，那今天就以这个网页为案例，把制作过程中我的方法和经验分享给大家。
作品地址（点开链接查看完整效果）： 4af.club/poi/draft.html
看到有小姐姐怀疑我们学的不是同一个HTML+CSS ，其实我想说，HTML+CSS的强大完全超乎你想象，不用着急，慢慢学。关键在于你要理解它是用来干嘛的，以及HTML和CSS是怎样互相配合发挥作用的。我们学编程、写代码是用于实战，而不是应付考试，所以像标签、语法这些东西，在用到的时候现查都没问题，千万不要死记硬背，最重要的是弄清楚它们的用法。
斌叔教给我们的HTML+CSS课程是必不可少的入门基础，为的就是让我们理解HTML+CSS的原理。刚开始可能不一定完全能搞懂，其实更多的领悟都是在以后的实践中慢慢收获的。
当然，我在学习斌叔的课程之前已经有了一些HTML+CSS基础，只不过没有学的很系统，多半是靠百度东一点西一点拼凑起来的。斌叔的课程对我来说是一个很好的复习和巩固的机会，让我把很久没碰的HTML又捡起来，也想借这个机会把JS学会。要知道，HTML+CSS＋JS，在前端领域可以说无所不能了。
言归正传，下面就具体讲一讲我的这个页面是怎么做出来的。
做任何一个网页或者网站，第一步当然就是构思，包括要做什么内容、页面是什么风格、以怎样的方式展现等等。我们需要先进行初步的构思，大致定下一个主题，然后就着手寻找素材。
收集和处理素材
我们在页面上要用到的素材，除了文字之外主要就是图片，可能还会有视频、音频等。收集到的原始素材通常不能拿来直接用，需要经过处理再放到页面上。我的页面里没有用到视频和音频，这里就只说说图片素材的处理。
这个页面中用到了三类图片，jpg、png和gif动图，它们都可以用Photoshop等图像处理软件来进行加工。
jpg是有损压缩格式，大部分网页中用到的背景图，以及尺寸较大的图片都是jpg格式，因为它可以最大限度地压缩图片文件的体积，提高网页打开的速度。
png是无损压缩格式，同样一张图片，存成png格式比jpg格式文件体积更大，但png有个非常实用的特性——支持透明效果。在我的页面中，有两张logo图片都是抠去底色之后存成透明的png格式，效果很不错。
gif是压缩位图格式，我的页面中用到了3张动态gif，在一定程度上为页面增加了动态效果。比起视频来说它的体积小了很多，但是相对于其它图片，它仍然是拖慢网页加载速度的重要因素。就拿这张图来说：
原图8M多，在ps中反复处理过，又改小了尺寸，最后缩小到2M多，网络不好的话有可能根本看不到这张，期待能找到更好的压缩gif图片的方法。做练习就任性的用一下没关系，如果做正式的网站，还是要重点考虑页面加载速度的问题。
另外需要说的一点是，虽然使用style可以改变img元素的尺寸，但还是建议尽量先对图片进行处理，裁剪到合适的尺寸来使用。
布局规划和页面设计
如果做的是整站，在这个步骤会耗费很多时间，好在我们现在要做的只是一个练习页面，不需要考虑太多。我在确定了POI主题之后，靠着以前存下来的素材，在脑海里粗略地来了一遍模拟，就开始动手写了。
我用的是最常见的单列水平居中布局，页面主体部分（body）宽度设定为1000px，加上margin: 0 auto实现居中。如图，页面结构其实非常简单。白底范围代表html区域，红色虚线框为body区域。
在填充内容之前，整个页面的html代码如下图所示，结构一目了然。
body中的第一个内容是页头区域，即&header&标签（注意不要和&head&标签混淆）所包含的内容，页头中包括了导航栏&nav&，各个内容区块就用&div&来做容器，最后是页脚区域&footer&。
&header&，&nav&和&footer&是html5中新增的标签（想要进一步了解html5标签可以看这里 http://www.w3school.com.cn/tags/index.asp），它们可以更清晰地展示标签的用途。我们知道在一个网页中，文字、图片等内容是用来给人看的，而它的代码是给机器看的。这些语意化的标签最大的优点是对搜索引擎友好，使网页更容易被收录。
当然在初学阶段我们做练习的时候可以不用考虑这些，你就算全部用&div&来布局也没什么问题。
说到页面设计，因为我本身是学设计的，所以比较注重页面的整体风格和色调。虽然省去了设计效果图的环节，但不管是在挑选素材，还是定义背景色、文本色、边框色，以及各区块的色调时，我都会考虑到页面的风格，放弃使用一些会破坏整体效果的图片，或者想法。
这个页面其实排版我还不太满意，不过可能因为整体风格出来了，乍看上去视觉效果还不错。具有美感的页面设计，确实可以为页面的最终效果加分。
在找素材的时候我已经选好一张很喜欢的大尺寸图片，就打算用它来做页面的背景图，并且决定了做成固定背景的单页面。因为相对于POI主题来说，这张背景图的色调最搭，它也最适合满屏出现。如果它随内容一起滚动的话，在图片和底色相接处很难处理，底色也很难找到完全合适的。所以我就干脆让背景图固定不动，实现代码如下（CSS代码）：
这是写在外部css文件中的，如果将样式直接写在html元素属性中是这样：
&html style="background: #181818 url(images/bg.jpg) no-repeat fixed center top"&
这里的background是一个简写属性，可以把诸如background-color这样与背景相关的属性一次全写进去，用空格隔开就行，比起单独的属性一个个写出来要简洁得多。
在我的代码中所用到属性有：
背景色 background-color，值为#181818；
背景图 background-image，值为url(images/bg.jpg)，即引入本地images目录下的bg.jpg图片；
如何重复背景图像 background-repeat，值为no-repeat，也就是不平铺图像；
是否固定背景图像 background-attachment，值为fixed，也就是固定图像，不随页面其余部分一起滚动；
定位背景图像 background-position，值为center top，也就是定位图像于顶部、居中;
注意：background-position的值通常为两个，如果只设定了一个值，那么默认第二个值为center
我本来是把背景图放在body当中的，后来打算用body来统一限制页面内容的宽度为1000px，就把背景图样式代码放到了外面一层，也就是html中，这样它就能不受1000px宽度限制。当然你也可以把背景图放在body里，用另外的div来规定主体内容的宽度，或者给页面各个区块最外层的div分别规定宽度，效果都一样。
不过，并不是所有的页面都适合采用这种背景图固定的形式，具体还要根据你的页面风格来决定。
DIV+CSS布局
在贴代码之前，我觉得有必要说一下DIV+CSS布局。如果你对前端开发感兴趣，打算往这个方向去发展，就必须掌握DIV+CSS布局的方式，它最大的优点就是可以实现结构与表现分离，让我们的代码结构清晰、便于维护，且符合web标准。这里的DIV，实际上是html中用来装载页面内容的各种元素的统称，不仅仅指&div&标签。它起到的作用是把html分割为一个个的区块，而css就是用来对各个区块和各个元素定义样式的。
通俗点说，html，css，js分别代表页面的结构、表现和交互。
就我的这个页面来说，html代码与css代码完全分开，css单独保存为名为style.css的文件，在html页面的head中进行了引用。
&link rel="stylesheet" type="text/css" href="style.css"&
在css文件中，元素的样式可以这样来定义：
相信大家都能看懂，这条样式如果写在html中是这样：
&p style="margin: 3px 0; font-weight: lighter"&&/p&
但这两种方法的作用范围还是有所区别，这就要提到css选择器的概念。
在外部css或嵌入式css代码中，我们可以发现｛ ｝括号中包含的是各个元素的具体样式，而括号前面有html, body、header、#logo、nav ul、.intro等等不同的写法，这些都属于css选择器。它们是用来选中html文档中的某个元素标签，然后在后面的 { } 括号中定义这个元素的样式。
css选择器有不同的几种类型，真要细说的话内容还不少，如果大家有兴趣我再单独写一篇，这里就只简单解释一下我的css代码中出现的几种情况。
html, body {} 代表的是同时选择html及body标签；
header {} 代表的是选择&header&标签（必须是有效标签且存在于关联的html文档中）；
#logo {} 代表的是选择id为“logo“的标签；
nav ul {} 代表的是选择&nav&中的&ul&标签；
.intro {} 代表的是选择class="intro"的标签（注意选择器前面的点）。
之所以在这里专门提到css选择器，是因为如果完全不了解这东西，可能看我的css代码会有些困扰。
HTML代码详解（结构部分）
下面是这个页面的代码详解，首先是html代码。
页头&header&部分主要说说&nav&中的链接跳转，可能很多初学的小伙伴还不太清楚。其实很简单，第一步，给导航栏的各个标题文字加上&a&标签，使其成为可以点击的按钮；第二步，由于我的各个内容区域都在当前页中，于是使用了一种最简单的跳转方法——给每个跳转目标设定id，然后在&a&标签中将链接地址设为各个目标的id，如下图，这样就可以实现页内跳转。
id和class的用法，斌叔在课程中已经讲过，这里就不再重复，只是要强调一下：同一个id在每个文档中不能有重复，否则针对此id的css样式或者js脚本都不起作用。
接下来说一说内容部分的各区块标题。这次区块标题的形式我是从素材图片中获得灵感，刚开始打算是做成图片，因为觉得不太可能用css代码来还原一个这么复杂的东西。但还是试着做了一下，结果还比较满意。以前还从来没有做过这个样子的标题，对自己来说也算是一个突破了。然后用两个不同样式的hr改造成了标题栏下方的两条线，颜色保持与页面风格统一。区块标题的代码请看最后的css完整代码，里面有注释。
各个内容区块其实没有太多好说的，标签和用法都是大家学过的。这里只说一下表格&table&，代码是：
&table border="1" cellpadding="5" cellspacing="0"&
其中，border属性是规定围绕表格的边框的宽度；cellpadding是规定单元边沿与其内容之间的空白，也就是单元格的內边距；cellspacing是规定单元格之间的间距，单位为px。
最后的页脚部分，&footer&标签同样不是必须，可以用&div&代替。页脚的内容没有固定模式，做练习页面的话可以随意发挥。
由于我这个页面内容不多，所以没有用上Bootstrap。但如果是做更复杂的页面，尤其是需要兼顾移动端的响应式布局页面，还是推荐使用Bootstrap。
CSS代码详解（样式部分）
css代码我主要分为两部分来写。通用样式是针对页面全局，一般用来定义各个部分都可能会用到的一些通用元素的样式。而布局样式则是根据html页面结构，分别设置每个区块、每个元素的样式。布局部分的代码没有什么难点，这里只重点说一下通用样式，因为它们的作用范围是全局，比较重要。
首先，对html和body的样式进行重置，这是为了覆盖不同的浏览器对html和body定义的默认样式，以确保我们的网页在浏览器窗口中不会多出莫名其妙的白边来。比如某些浏览器会默认给html加上10px的外边距。
html, body { height: 100%; margin: 0; padding: 0; }
接下来是对body的样式定义，凡是包含在body范围内的元素都受其影响，除非另外定义了某些元素的局部样式。
body { width: 1000 margin: 0 font: 14px/1.7em 'PT Sans','Open Sans','Lucida Sans Unicode','Lucida Grande','Hiragino Sans GB','Microsoft YaHei','SimHei', color: # -webkit-font-smoothing:}
首先解释一下font，它后面的样式代表文本字号14px/行距1.7em，然后是文本的字体，从第一个字体开始按优先级排序，访问者电脑中存在哪个字体就显示哪个字体。这里解释一下行距所用的em，这是一个相对的长度单位，它之所以要用斜杠和字号放在一起，是因为它的参照对象就是斜杠前面的字号数值。在这条样式中，1em就等于14px，因此行距1.7em就等于14px文本的1.7倍。在这个页面中文本内容全部是英文，所以这里用em比较合适，如果是以中文为主的网站，还是推荐使用px。
然后是对&h1&到&h6&这几个标题的样式定义，标题的颜色，是否加粗等属性都可以在这里设置。通常来说，&h1&到&h6&有默认的字号，从大到小排列，一般不需要自己设置。如果你觉得显示的字号不合适，可以重新定义各个标题字号。
h1, h2, h3, h4, h5, h6 { color: # font-weight: normal }
注意1：这条属性是为&h1&到&h6&的所有标题设置同样的属性，如果你想单独设置某个标签的属性，请单独列出来，如：h2 { color: red }
注意2：&h1&标签在同一个页面中只能有一个，不能重复使用。而&h2&到&h6&标签可以多个共存。
接下来，&p&元素和&a&元素都是设置其默认的全局样式，如果只想要改变某个局部的&p&元素或&a&元素的样式，可以用css选择器单独设置，如：
.test a { }
代表只给class＝“test“的元素中的&a&元素定义样式，其它&a&元素不受影响。
&ul&无序列表的样式通常不需要额外设置，在这里因为导航栏&nav&中使用了&ul&，所以我设置了一条样式：ul { list-style: none }，为的是清除列表的默认样式，比如每个&li&前面的小圆点。如果你的网页需要用到带有默认样式的无序列表，请不要在通用样式中这样写，而是使用class选择器来单独设置不需要默认样式的&ul&，例如：
nav ul { list-style: none }
html完整代码
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&title&一个草稿&/title&
&link rel="stylesheet" type="text/css" href="style.css"&
&div id="logo"&&img src="images/logo.png"&&/div&
&li&&a href="#Synopsis"&Synopsis&/a&&/li&
&li&&a href="#Characters"&Characters&/a&&/li&
&li&&a href="#Episodes"&Episodes&/a&&/li&
&li&&a href="#Storyline"&Storyline&/a&&/li&
&li&&a href="#Community"&Community&/a&&/li&
&div class="intro"&
&p&The government has a secret system, a machine that spies on you every hour of every day.&br&
I designed the machine to detect acts of terror but it sees everything. Violent crimes involving ordinary people.&br&
The Government considers these people "IRRELEVANT".&/p&
&div class="gif"&
&img src="images/machine.gif"&
&div id="Synopsis"&
&div class="titlebar"&
&h2&SYNOPSIS&/h2&&p class="subtitle"&GOD MODE&/p&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar1"&20%&/p&&/div&
&hr class="hrv"&
&hr class="hrh"&
&div&&img src="images/intro_600.png"&&/div&
&div&&img src="images/original_s.jpg"&&/div&
&p&Person of Interest centers on a mysterious reclusive billionaire computer programmer named Harold Finch (Michael Emerson), who develops a computer system (known as "The Machine") for the U.S. government that is capable of collating all sources of information to predict and identify—in advance—people planning terrorist acts. He finds that the Machine also identifies other perpetrators and victims of premeditated deadly intentions, but as these are considered "irrelevant" by the government, he programs it to delete this information each night. He soon realizes the Machine has developed into a sentient superintelligent artificial intelligence, leaving him wrestling with questions of human control and other moral and ethical issues resulting from the situation. His backdoor into the Machine allows him to act covertly on the non-terrorism cases, but to prevent abuse of information, he directs the Machine to provide no details beyond an identity to be investigated. He recruits John Reese (Jim Caviezel), a presumed-dead former CIA agent, and later others, to investigate and act on the information it provides.&/p&
&/div&&!-- end #Synopsis --&
&div id="Characters"&
&div class="titlebar"&
&h2&CHARACTERS&/h2&&p class="subtitle"&A More Perfect Union&/p&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar2"&38%&/p&&/div&
&hr class="hrv"&
&hr class="hrh"&
&div class="characters"&
&p&Starring：Bear&/p&
&img src="images/role_Bear.gif"&
&li&&img src="images/role_Finch.jpg"&&p&Harold Finch&/p&&/li&
&li&&img src="images/role_Reese.jpg"&&p&John Reese&/p&&/li&
&li&&img src="images/role_Carter.jpg"&&p&Joss Carter&/p&&/li&
&li&&img src="images/role_Fusco.jpg"&&p&Lionel Fusco&/p&&/li&
&li&&img src="images/role_Shaw.jpg"&&p&Sameen Shaw&/p&&/li&
&li&&img src="images/role_Root.jpg"&&p&Root&/p&&/li&
&/div&&!-- end #Characters --&
&div id="Episodes"&
&div class="titlebar"&
&h2&EPISODES&/h2&&p class="subtitle"&If-Then-Else&/p&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar3"&59%&/p&&/div&
&hr class="hrv"&
&hr class="hrh"&
&div class="episodes1"&
&table border="1" cellpadding="5" cellspacing="0"&
&th&Season&/th&
&th&Episodes&/th&
&th&First aired&/th&
&th&Last aired&/th&
&td&1&/td&
&td&23&/td&
&td&September 22, 2011&/td&
&td&May 17, 2012&/td&
&td&2&/td&
&td&22&/td&
&td&September 27, 2012&/td&
&td&May 9, 2013&/td&
&td&3&/td&
&td&23&/td&
&td&September 24, 2013&/td&
&td&May 13, 2014&/td&
&td&4&/td&
&td&22&/td&
&td&September 23, 2014&/td&
&td&May 5, 2015&/td&
&td&5&/td&
&td&13&/td&
&td&May 3, 2016&/td&
&td&June 21, 2016&/td&
&div class="episodes2"&
&img src="images/room.gif"&
&div class="episodes3"&
&p&According to CBS, Person of Interest received the highest test ratings of any drama pilot in 15 years, what one CBS executive called "crazy broad appeal you don't usually see", prompting CBS to move CSI, which was broadcast on Thursday for over 10 years, to Wednesday, opening up a slot for Person of Interest. The pilot episode won its time slot, drawing 13.2 million viewers.&/p&
&/div&&!-- end #Episodes --&
&div id="Storyline"&
&div class="titlebar"&
&h2&STORYLINE&/h2&&p class="subtitle"&Search and Destroy&/p&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar4"&76%&/p&&/div&
&hr class="hrv"&
&hr class="hrh"&
&div class="line"&
&div class="line_p"&
&p&A Person of Interest is an individual who will be involved in a violent crime. The Machine, without indicating whether the individual is the victim or the perpetrator, supplies his or her Social Security number to Reese and Finch, who study their background and attempt to prevent the violent crime.&/p&
&div class="line_p"&&img src="images/pic01.jpg"&&/div&
&div class="line_p"&
&p&During season two, another organization of powerful business figures, Decima Technologies, is revealed to be attempting to gain access to the Machine. Reese and Finch encounter Sameen Shaw, an ISA assassin, on the run after being betrayed by her employers. &/p&
&div class="line"&
&div class="line_p"&&img src="images/pic02.jpg"&&/div&
&div class="line_p"&
&p&In season three, Carter delves deeper into her investigation of HR, eventually u but she is killed. In his grief, Reese briefly leaves the team. During the second half of season three, Decima Technologies starts to acquire hardware to create a new artificial intelligence called Samaritan.&/p&
&div class="line_p"&&img src="images/pic03.jpg"&&/div&
&div class="line"&
&div class="line_p"&
&p&Season four covers the team's life in hiding. They continue to work on cases, but must now also evade Samaritan, which lacks the restrictions and human-oriented perspective Finch built into the Machine, and which is seeking to resolve perceived problems of human violence by reshaping society, sometimes violently. &/p&
&div class="line_p"&&img src="images/pic04.jpg"&&/div&
&div class="line_p"&
&p&In season five, the Machine is reinstated onto a makeshift network of computers in hiding. Shaw is captured by Samaritan operatives and advanced VR technology is used to run thousands of neural simulations in order to find a means to persuade her to reveal the Machine's location.&/p&
&/div&&!-- end #Storyline --&
&div id="Community"&
&div class="titlebar"&
&h2&COMMUNITY&/h2&&p class="subtitle"&Last Call&/p&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar5"&95%&/p&&/div&
&hr class="hrv"&
&hr class="hrh"&
&div&&img src="images/team.jpg"&&/div&
&div class="the_end"&
&p&No one ever said we were gonna win, &/p&
&p&but it doesn't mean you stop fighting.&/p&
&/div&&!-- end #Community --&
&div class="titlebar"&
&h2&Mission accomplished&/h2&
&h4&PREDICTED&/h4&
&div class="prgbar"&&p class="bar6"&100%&/p&&/div&
&p class="copyright"&(C) 2017 Unkown Team. All rights reserved.&/p&
css完整代码，为了方便大家看明白，特意加上了注释。
@charset "UTF-8";
/* --- 通用 --- */
html, body { height: 100%; margin: 0; padding: 0; } /* 重置浏览器默认样式 */
html { background: #181818 url(images/bg.jpg) no-rep } /* 页面背景图，也可以放在body中 */
width: 1000
font: 14px/1.7em 'PT Sans','Open Sans','Lucida Sans Unicode','Lucida Grande','Hiragino Sans GB','Microsoft YaHei','SimHei', /* font为简写属性，设置字号/行距及字体 */
color: # /* 设置全局通用的文本颜色 */
-webkit-font-smoothing: /* CSS3中用于设置webkit内核浏览器字体抗锯齿属性，只对MacOS的Webkit有效 */
h1, h2, h3, h4, h5, h6 { color: # font-weight: } /* 设置标题h1到h6的通用属性 */
p { margin: 3px 0; font-weight: } /* 设置p元素的通用属性 */
color: #f29f3f;
margin: 0;
text-decoration: /* 去除a元素的下划线 */
} /* 设置a元素的通用属性 */
a:hover, a:focus { color: #ffe957; } /* 设置a元素在鼠标悬停及获得焦点时的通用属性 */
ul { list-style: } /* 设置ul无序列表的通用属性 */
table { margin: 0 }
hr { border-bottom: 1px solid rgba(100,130,170,0.5); border-top: 0; clear: margin: 20px 0; } /* 设置水平分割线的通用属性 */
/* --- 布局 --- */
header { text-align: } /* 设置页头的样式 */
#logo { margin: 200px 0 60px 0; }
nav { margin: 0 background: rgba(50,60,70,.5); border: rgba(50,60,70,.5) solid 1 } /* 设置nav导航栏的样式 */
nav ul li { display: inline- margin: 0 50 } /* 设置nav导航栏中每个标题li元素的样式 */
nav ul li a { font-size: 18 } /* 设置nav导航栏中每个标题a元素的样式 */
.intro { padding: 70px 0; margin-bottom: 0 color: rgba(100,130,170,1); }
.intro p { font: 14px/2em 'Courier New' } /* 单独设置所有class="intro"的元素中的p元素的样式 */
.gif { margin: 50px 0; }
.gif img { border: 1px solid rgba(100,130,170,0.3); } /* 设置.gif中img图片边框的样式 */
/* - 各个内容区块通用的标题样式 - */
.titlebar { display: inline- margin-top: 30 padding: 10 border: 1px solid rgba(100,130,170,0.5); background-color: text-align: } /* 区块标题容器 */
.titlebar h2 { display: margin: 0; padding: 2px 5 border: red solid 2 color: font-weight: 600; } /* 使用h2作为主标题文字，因为h1不能重复使用 */
.subtitle { position: display: font-size: 16 top: -2 left: 7 margin-right: 5 color: } /* h2主标题右侧的文字，使用position:relative来定位，top和left进行微调 */
.titlebar h4 { color: # font-size: 16 font-weight: 600; line-height: 20 padding: 0; margin: 0; margin-top: 3 }
.prgbar { height: 16 margin-top: 2 padding: 0; line-height: 16 background-color: } /* 标题下方的模拟进度条 */
.prgbar p { background-color: color: #fff } /* 进度条中的百分百文字 */
.bar1 { width: 20%; } /* 红色进度条的宽度 */
.bar2 { width: 38%; }
.bar3 { width: 59%; }
.bar4 { width: 76%; }
.bar5 { width: 95%; }
.bar6 { width: 100%; }
hr.hrv { position: top: 0 left: 50%; width: 0; height: 20 margin: 0; border-color: rgba(100,130,170,0.5); } /* 用水平线改造而成的垂直短线 */
hr.hrh { margin-top: 0; margin-bottom: 60 } /* 标题栏下方专用的水平线，与通用水平线样式有区别 */
/* - 各个内容区块的具体样式 - */
#Synopsis,#Characters,#Episodes,#Storyline,#Community { clear: display: text-align: margin: 30px 0 120px 0; } /* 各内容区块的间距和居中属性 */
.characters img { border: 1px solid rgba(100,130,170,0.5); margin: 10px 0; }
.characters ul li { display: inline- } /* 设置display:inline-block属性，使得li们能在ul中愉快地排成一行，不会互相排挤 */
.characters ul img { width: 70%; border: 1px solid rgba(100,130,170,0.5); margin: 30px 0 10px 0; }
.episodes1 { display: inline- width: 50%; } /* 使用display:inline-block属性，让.episodes1与.episodes2能手牵手，肩并肩 */
.episodes2 { display: inline- width: 40%; }
.episodes2 img { width: 95%; }
.episodes3 { display: width: 80%; margin: 30 } /* 傲娇的episodes3不和上面两位一块玩，所以要用display: block属性来独占一行 */
/* - 九宫格排列方法很多，以下只是最笨的一种，不建议照搬 - */
.line { display: inline- background-color: #282828; padding: 0; text-align: margin: -3px 0; } /* margin:-3px 0;的作用是对每个.line之间的间距进行修正，使它们可以无缝贴合 */
.line_p { float: display: width: 320 height: 200 margin: 0 border: 0px solid rgba(100,130,170,0.5);}
.line_p img { width: 320 height: 200 } /* 此处img图片的宽和高必须与父元素line_p一致，否则会导致错位 */
.line_p p { padding: 5px 15 text-align: } /* 在此对.line_p中的p元素位置进行微调 */
#Community img { border: 1px solid #333; } /* 设置#Community中img图片边框的样式 */
.the_end { margin: 20 }
.the_end p { font: 22px/1.7em 'Microsoft YaHei', 'SimHei',}
footer { clear: display: text-align:} /* 设置页脚的样式 */
.copyright { font-size: 10 color: #999; margin: 30px }
其实我的这个页面并没有什么高深的技巧，代码都是很基础的，一看就懂。就算暂时不懂也没关系，把代码copy过去自己试一试，再举一反三变着花样玩，加上强大的辅助工具——百度，很快就能掌握。
希望这个案例能够帮助小仙女们更加透彻的理解HTML+CSS，但是要提醒一点：我自己也还在摸索阶段，我的代码并不标准而且可能存在错误，所以最好不要照搬，而是尽量看懂，会用。当你可以完全自己写出这样一个页面的代码，你会发现HTML+CSS真的不难，而且很有趣。
来源： “程序媛计划”论坛
链接： https://www.cxy61.com/girl/cxyteam_forum/detail.html?id=5484&pk=9
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点}