css(二)

html-css013

css(二),第1张

1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…

<ol type="A">:在每项前面显示A,B,C…

<ol type="a">:在每项前面显示a,b,c…

<ol type="I">:在每项前面显示I,II,III…

有序列表ol增加了一个属性, <ol start="50">,这样就指定了起始值从50开始

2.无序列表使用一对闭合的标签表示, <ul></ul>。内部的一项使用 <li>内容 </li>来表示。

可以通过ul标签的type属性来修改这个修饰符。

<ul type="disc">显示为一个圆点,是默认值

<ul type="circle">显示为一个空心圆圈

<ul type="square">显示为一个实体正方形

“无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。

3.自定义列表

<dl>标签全称是definition list,代表“自定义列表”。 <dl>后面的l代表list,列表的意思。

<dt>标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term,“项目”的意思。

<dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description,“描述”的意思。

例子:

使用 list-style-type: none

id:指定标签的唯一标识

class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css

块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段

块级元素标签 h,ul,li,ol,p,div

行内元素标签 a,em,q, img,span

页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。

语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。

<form name="myForm" action="/test/6.php" method="post">

name:表单提交时的名称;

action:提交到的地址,如果不写action,信息就会提交到当前页面;

method:提交方式(get和post),如果不写,默认的是get

2.常用标签:

复选框当中,可以把name值设置成一个数组,例:

<button>提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据

<a class="btn" href="#">提交 </a> ——链接

<input type="submit" value="提交"> ——提交按钮,提交信息到服务器

设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

<input type="hidden" name="identity" value="123">

CSS中国社会状况综合调查数据下载教程:

网上搜索“中国社会质量基础数据库”进入。注册用户。登录后点击左上角的“调查数据”。进入CSS历年数据列表下载数据、问卷。网站可下载CSS最新数据。网站可以在线探查数据,简单的数据分析。数据格式包括Excel、spss、stata的格式。

中国社会状况综合调查(ChineseSocialSurvey,简称CSS)是中国社会科学院社会学研究所于2005年发起的一项全国范围内的大型连续性抽样调查项目,目的是通过对全国公众的劳动就业、家庭及社会生活、社会态度等方面的长期纵贯调查,来获取转型时期中国社会变迁的数据资料,从而为社会科学研究和政府决策提供翔实而科学的基础信息。该调查是双年度的纵贯调查,采用概率抽样的入户访问方式,调查区域覆盖了全国31个省/自治区/直辖市,包括了151个区市县,604个村/居委会,每次调查访问7000到10000余个家庭。此调查有助于获取转型时期中国社会变迁的数据资料,其研究结果可推论全国年满18-69周岁的住户人口。为了兼顾纵贯调查的连续性和社会议题的现实性,CSS的调查问卷在设计上分为基础模块、更替模块和热点模块三个部分。其中基础模块固定不变,包含了个人基础信息、劳动与就业、家庭结构、家庭经济状况等内容;更替模块如社会阶层地位流动、社会保障、休闲消费、社会价值观等,隔一定周期后重复调查;热点模块则与时俱进,目前已进行了社会群体利益关系、民生问题、城镇化等主题的研究。

首先你要有一个合理的布局:

<div class="box">

<ul class="list">

<li>1111111111111</li>

<li>2222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

</ul>

</div>

用一个盒子包住一个无序列表,把盒子模型的宽度固定,当li没有宽度的时候,它就是单列的,当li有宽度而且浮动的时候,可以随意变成多列多行。

现在假设盒子模型宽是450~左右内边距是10:

样式一(一列多行):

*{padding:0margin:0}//初始化内外补白

li{list-style:none}//初始化列表

.box{width:450pxpadding:10px}

.box .list li{line-height:24px}

样式二(二列多行):

*{padding:0margin:0}//初始化内外补白

li{list-style:none}//初始化列表

.box{width:450pxpadding:10px 0 10px 10px}//这时候列表的宽度只剩下450-10=440,可以把宽度定为210加10右边外补白

.box .list{zoom:1}

.box .list:after{content:""height:0clear:bothdisplay:block}//清除浮动

.box .list li{widht:210pxline-height:24pxfloat:leftmargin-left:10px_display:inline}//两个220刚好440的宽