前台开发总结01

2024-04-27 15:11:38

字体：大中小

来源：转载

供稿：网友

1、在网站首页中，logo采用的是h1标签，一般是为了让搜索引擎更好的抓取关键字，建议一个页面只有一个h1，而且是最重要的关键字放在里面。并且，使用text-indent对该<h1>标签样式进行设置，如下所示：h1{ text-indent:-9999px;}//从而使该<h1>在页面上消失不见。或者使用display:none;2、页面导航条，通常是使用list列表和浮动样式配合实现的。在页面需求中，有时是让导航条显示在页面的右方，你可以通过以下样式来实现ul{ list-style-type:none; float:right;}ul > li{ float:left;}3、问题描述：想让搜索框位于页面内容<body>的中间代码实现：首先，设置搜索框的父元素，即<body>的position:relative；其次，设置搜索框的CSS为：position:absolute;top:50%;left:50%;假设该搜索框width:200px;height:80px;最后，设置该搜索框的外边距：margin:-40px 0px 0px -100px;//因为搜索框的绝对定位是以搜索框的左上角为基准的，所以要通过外边距减去搜索框长和宽的一半。4、在网站的首页中，分为头部<header>、底部<footer>和主体内容部分，在首页总体编码完成后，最好可以在<header>下方，与主体连接处加上阴影，代码如下所示：header{ box-shadow:0px 1px 1px gray; position:relative; z-index:9999;}5、为了确保css文件的编码格式为utf-8，可以在xxx.css文件的开头，加上@charset "utf-8";6、在页面背景图片的基础上，加上图像线性渐变(其实是为了让图片变得暗一点，从而使图片上的文字变得更加清晰)，可以凸显出背景图片上的文字，提高用户体验。div{ …… background:linear-gradient(to right bottom,rgba(0,0,0,0.7),rgba(255,255,255,0)),url(……) no-repeat center;}//在css的属性值中，逗号隔开的是同一类型/属性的值；空格隔开的是不同类型/属性的值。7、浮动布局是很常用的布局方法，但是，当对页面的主体使用浮动布局后，若要增大页面主体和页面底部的间隔，此时对页面底部使用常用的margin-top属性进行设置时，属性值的大小不是主体和底部的间隔，而是底部和顶部的间隔。此时，我们可以对底部使用定位。footer{ position:relative; top:20px;}

上一篇：extjs datefield的readOnly属性

下一篇：404&amp;&amp;403页面

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注