前臺開發總結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頁面