前端开发应该知道的几个CSS网页表单布局技巧

html-css011

前端开发应该知道的几个CSS网页表单布局技巧,第1张

1、绝对定位

在绝大过程中,想确定一个元素在网站当中的固定位置,绝对定位是实现这个方式的解决办法。在网页当中,绝对定位可精确的控制元素在网页当中的位置,我们可使用顶部、底部、左侧和右侧,附上一个像素值来控制元素所在的位置。

position:absolutetop:50pxright:50px

上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。

2、覆盖所有样式

写CSS的时候都应该知道,当你想给一个元素添加一个新的CSS样式,但这个样式之前已经被定义过了。此时我们可以采用!important来定义。

例如,如果我想在我的网站的特定部分的H3标题是红色而不是黄色,可以使用下面的CSS:

.section h3 {color:red !important}

3、居中

居中分很多情况,一般会分成文本居中和DIV的内容居中。

文本居中

文本居中使用text-align:center。如果想让文本在左右两侧,可以使用左侧或右侧。

DIV内容

DIV内容居中跟文本居中不一样。CSS可以这样定义:

#div1 { display: blockmargin: autowidth: anything under 100% }

把宽度设置为“100%以下”的原因是因为如果它是100%宽度,那么如果是全宽度,并且不需要居中。最好有一个固定的宽度,如60%或550像素等。

4、垂直对齐(对于一行文本)

要使菜单的高度和文本的行高一致,可以这么设置:

.nav li{line-height:50pxheight:50px}

5、悬停效果

这适用于按钮,文本链接,网站的部分,图标等等。如果你想做一个悬停效果,可以试试:

.entry h2{font-size:36pxcolor:#000font-weight:800} .entry h2:hover{color:#ffeb3b}

这个功能可以让你的h2标签的颜色从黑色变成黄色。

6、悬停效果过渡

对于悬停效果,如使用菜单或网站上的图像,我们肯定不希望颜色快速贴近结果,所以我们可以通过使用时间变化来达到过渡的效果。

.entry h2:hover{color:#ffeb3btransition: all 0.5s ease}

这就使得样式上的改变,可以是从黑色变黄色的过渡时间是0.5秒,而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。

7、a标签的状态

我们在遇到a标签的时候,一定要给a标签做样式定义,否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过,更利于用户体验。

a:link {color: blue} a:visited {color: red}

8、轻松调整图像大小以适应

说到这个样式,我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手,我相信这个效果肯定有很多人都想做,当然,我提供的方法也只是其中的一种:

img {max-width:100%height:auto}

这个样式意味着最大的图像可能是100%,并根据图像宽度自动计算高度。在某些情况下,您可能还必须指定宽度为100%。

9、父级元素和子元素

如果ni不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器:

h1 >strong {color:red}

特殊情况下你可能会想定义第N个子元素的样式,这样就可以用到下面这个样式:li:nth-child(n)

具体的使用方法可以去w3school上看。

10、将CSS应用于多个类或选择器

如果你想要在所有图片,博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目,用逗号分隔:

.blog,img,.sidebar {border: 1px solid #000}

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