使用HTML5和CSS3碎語_html/css_WEB-ITnose
Jun 24, 2016 am 11:36 AM
?
當我們使用HTML5， CSS3，甚至Bootstrap設計網(wǎng)站的時候，有些方面是必須考慮的，比如字體大小，標題大小，行間距，每行字數(shù)，字體，顏色，背景圖片和文字的搭配，圖標，留白和布局......所有的這些，都不是隨隨便便的，講究一定的原則。本篇收集了使用HTML5和CSS3設計網(wǎng)站的一些片段。
HTML5和CSS3常用參考網(wǎng)站？
?
● 瀏覽器渲染符合HTML5標準：http://necolas.github.io/normalize.css/
● Google字體：ttps://www.google.com/fonts
● 柵格：http://www.responsivegridsystem.com/
● 扁平顏色：http://flatuicolors.com/
● 選擇顏色值：http://www.0to255.com/
● icon圖標:http://ionicons.com/
● css: https://css-tricks.com/
● js的CDN:http://www.jsdelivr.com/
● 一個CSS屬性在各個瀏覽器的兼容性: http://caniuse.com/
● 創(chuàng)建favicon: http://realfavicongenerator.net/
● 壓縮圖片尺寸：http://optimizilla.com/
● CSS文件最小化：www.minifycss.com
● JS文件最小化：hTp://www.minifyjavascript.com/
● 檢測html代碼：http://validator.w3.org/
?
Typography排版？
?
● 正文字體大?。嚎刂圃?5px-25px之間
● 標題大小：正標題60px、90px, 副標題32px
● 行間距：120%-150%
● 每行字數(shù)：40個左右漢字，80個左右英文
● 字體：自然、簡潔、現(xiàn)代
?
顏色？
?
● 使用一種主色調(diào)
● 使用顏色工具
● 搭配使用引人注意的顏色
● 不使用純黑
● 紅色：力量，熱情，興奮，能量；橙色：積極，引人注意，快樂的，創(chuàng)新，友好，自信，勇氣；黃色：幸福，好奇，光亮；綠色：融洽，自然，生命，健康；藍色：耐心，平和，穩(wěn)定，可信賴，職業(yè)；紫色：自由，能量，財富，忠誠，神秘，高貴；粉紅：關心，平和，女性；褐色：自信，放松，舒適，可靠。
● 列出網(wǎng)站項目所使用的顏色列表
?
背景圖片和文字？
?
● 文字放圖片上
● 灰色黑色色調(diào)的背景圖配白色文字
● 文字放圖片中的一個矩形背景區(qū)域內(nèi)
● 模糊背景圖片
● 背景圖片底部漸趨褐色，底部再配白色字體
?
icon圖標？
?
● 描述功能或步驟的時候使用icon
● 在菜單和Link中使用icon
● icon只能頁面中的配角，不能是主角
● 使用icon fonts，因為相比圖片分辨率更高
?
留白和布局？
?
● 留白就是呼吸
● 需要留白，但不能丟失頁面元素的關聯(lián)性
● 留白能體現(xiàn)頁面元素的關系
● 用戶瀏覽的起點，內(nèi)容流向符合內(nèi)容本身，留白能引導流向
?
用戶體驗？
?
● 頁面內(nèi)容不僅僅是展示，更是感覺
● 取用戶體驗和業(yè)務邏輯間的交集
?
靈感？
● 收集靈感
● 理解
● 多問為什么？
● 好設計的共同點是什么？
● 怎樣設計HTML和CSS？
?
構建網(wǎng)站的7個步驟？
?
1、定義自己的網(wǎng)站項目
?
● 明確目的，是賣產(chǎn)品，受眾
● 了解受眾
● 設計，始終考慮目的和受眾
?
2、準備資料素材
● 文字信息，圖片，視頻，icon，等等
● 內(nèi)容為先
● 考慮如何導航
● 考慮網(wǎng)站文件結構，站點地圖
?
3、原型設計
?
4、設計階段
?
5、優(yōu)化
?
性能、SEO優(yōu)化等
?
6、宿主
?
7、網(wǎng)站維護
讓瀏覽器渲染元素符合現(xiàn)代標準？
?
→http://necolas.github.io/normalize.css/
?
Web Fonts?
→https://www.google.com/fonts
?
柵格？
→參考：http://www.responsivegridsystem.com/
?
flat ui color?
?
→ 參考：http://flatuicolors.com/
→ 選擇格式
→ 點擊某個背景相當于復制了對應的顏色值
?
相似顏色的顏色值？
?
→ 參考：http://www.0to255.com/
→ 點擊 Pick a color
→ 輸入值，再點擊pick color
→ 在列出的相似值列表中選擇顏色
?
icons?
?
→ 參考：http://ionicons.com/
→ 把下載下的ionicons.css文件拷到當前項目，把下載下的fonts文件夾內(nèi)的所有文件拷貝到當前項目的fonts文件夾內(nèi)
→ 在頁面中引用ionicons.css文件
響應式設計？
?
● Fluid grid:所有的頁面元素都是相對單位，比如百分比
● Flexible images:圖片尺寸單位也是相對黨委，比如百分比
● Media queries:針對不同的終端設置不同的CSS
?
元素狀態(tài)變化的過渡效果？
?
div{
??? width:100px;
}
div:hover{
??? width:300px;
}
?
如果想在div的原始狀態(tài)和hover狀態(tài)間加一個過渡效果，應該這樣設置：
?
div{
??? width:100%;
??? transition:width 2s;
}
div可以是圓形嗎？
?
--可以的，真服了。
?
.someclassname div{
??? color: #e67e22;
??? border: 2px solid #e67e22;
??? display: inline-block;
??? border-radius: 50%;
??? height: 55px;
??? width: 55px;
??? text-align: center;
??? padding: 5px;
??? float: left;
??? font-size: 150%;
??? margin-right: 25px;
}
?
讓一個行內(nèi)元素居中？
?
span li{
??? display:inline-block;
??? width:50px;
??? text-align:center;
??? vertical-align:middle;
??? line-height:120%;
??? margin-top:-5px; //負數(shù)表示拿掉一些空間
}
?
對一個元素設置的CSS無效？
?
有時候會碰上對一個元素設置CSS怎么設置都無效，有一種可能是元素標簽的名字寫錯了。比如把section,寫成sectioin。
?
再次，一個大的背景圖片如何完整呈現(xiàn)在某個區(qū)域，比如section, div中？
?
background-image:linear-radient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url();
background-size:cover;
background-position:center;
height:100vh;//vh表示頁面視圖高度
?
讓一個塊級元素成圓形？
?
height: 50px;
width: 50px;
border-radius: 50%;
?
讓一個元素絕對定位？
?
首先要保證其父類元素設置為相對定位。
position: relative;
然后再設置元素為絕對定位。
position: absolute;
top: -5px;
left: -5px;
自適應考慮寬度的幾個節(jié)點？
?
0, 480px, 768px, 1024px, 1200px，按照由大到小的寬度考慮設計，在每一個寬度區(qū)間，看有不順眼的就修理。
?
/*big tablet to 1200px, width smaller thn the 1140px*/
@media only screen and (max-width:1200px){
}
/*small tablet to big tblet from 768px to 1023px*/
@media only screen and (max-width:1023px){
}
/*small phones to small tablets from 481px to 767px*/
@media only screen and (max-width:767px){
}
/*small phones from 0 to 480px*/
@media only screen and (max-width:480px){
}
?
也不要忘了在head部分添加如下：
?
?
哪些方面需要考慮自適應？
?
● 重新設置寬度高度的百分比或大小
● 重新設置padding的百分比或大小
● 重新設置margin的百分比或大小
● 重新設置字體大小或百分比
● 考慮是否隱藏圖片
● 考慮是否改變圖片的大小
● 考慮某個元素是否可見
解決chrome下顯示繁體不顯示簡體漢字？
?
更多工具→編碼→自動檢測
調(diào)整chrome瀏覽器大小的同時查看其寬高？
?
→ 打開開發(fā)者工具
→ 點擊"向下還原"窗口
→ 拖動chrome瀏覽器的任意邊界，在右上角位置顯示當前瀏覽器的大小
通過這個，可以方便地觀察某個元素在寬度發(fā)生改變時對應的樣式。(前提時針對該元素設置了不同寬度下的樣式)
?
哪些瀏覽器們以及前綴？
?
● Android: -webkit-
● Chrome： -webkit-
● IE：-ms-
● Firefox： -moz-
● Safari： -webkit-
● Opera: -o-
?
舉例來說：
?
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
?
這樣是不是很麻煩呢？是的，Brackets有一個插件叫"Autoprefixer"幫我們解決這個問題。
?
→ 選擇某頁所有的css文件
→ 編輯--Auto Prefix Selection
→ 可以看到所有的css加上了前綴
?
可以看到，Autoprefixer足夠智能，只有需要前綴的，才加上前綴。
創(chuàng)建favicon?
?
→ http://realfavicongenerator.net/
→ 上傳圖片文件，輸入保存的相對路徑，比如：resources/favicons
→ 點擊"Favicon package"按鈕
→ 把提供的link放到頁面head部分
?
網(wǎng)站項目提速的措施？
?
● 保證清晰度的情況下，盡可能減少圖片尺寸，可以使用的工具：http://optimizilla.com/
● 最小化CSS和JS文件，可以使用的工具：www.minifycss.com 和 hTp://www.minifyjavascript.com/
一些基本的SEO技巧？
?
● meta中的content
?
在每一個頁面表頭加？
?
?
常識？
?
● text-rendering: optimizeLegibility 告訴瀏覽器如何渲染文本，它并沒有作為CSS3的一個標準，而且不同的瀏覽器有不同的渲染默認設置，嚴格意義上來說，text-rendering并不能完全保證在用戶瀏覽器上按預想的方式渲染文本。
?
● 塊級元素才可以float, display:block,默認自動占100%的寬度
?
● header 頁頭部分
?
● height: 100vh; 意思是100% viewport height
?
● background-size: cover; 背景圖片覆蓋整個區(qū)域，比如一個div， 一個section
?
● background-position: center;背景圖片居中
?
● 大的背景圖片大概有多大？寬度在2700px-3000px之間，高度在1500px-2000px之間
?
● transform,用來操控元素，傾斜skewing，旋轉(zhuǎn)rotating,移動translating,縮放scaling。比如transform: translate(-50%,-50%);向左移動元素自身寬度的50%，向上移動元素自身高度的50%
?
● 當給元素絕對定位，常規(guī)套路是：position:absolute;width:1000px;top:50%;left:50%;
?
● 在背景圖片上加上一層顏色，比如漸變色：background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/h.jpg);
?
● 字體大小和字體粗細的相對性。當字體變大，就要相應降低font-weight的值。
?
● 字母間距 letter-spacing
?
● 單詞間距 word-spacing
?
● 鏈接a的幾個狀態(tài)：.classname:link, .classname:visited, .classname:hover, .classname:active
?
● transition，給元素狀態(tài)變化的過渡效果
?
● nav導航條
?
● 圖片縮放：可以讓寬和高的某個值固定，另外一個值設置為auto，比如：height:100px;width:auto;
?
● :after，在元素后面追加內(nèi)容
?
● display: block，另起一行，默認寬度100%
?
● figure, html5元素標簽，代表一個內(nèi)容單元，里面放圖表、圖片、展示、代碼段等，可以被移除而不影響整個頁面元素
?
● 設置不透明度，opacity: 0.7;注意：這個背景顏色相關
?
● .someclassname:first-child 第一個someclass; .someclassname:last-child 最后一個someclass,也可以用.someclassname:last-of-type
?
● background-attachment: fixed;背景圖像不會隨著頁面其余部分移動；默認值scroll，表示背景圖片會隨著頁面其余部分滾動而移動
?
● blockquote配合cite標簽一同使用
?
● 以CSS的方式為元素前面或后面添加一些簡單內(nèi)容：.someclassname:before, someclassname:after
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
How do I minimize the size of HTML files?
Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
How do I use the element to represent the footer of a document or section?
Jun 25, 2025 am 12:57 AM
It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.
How has HTML evolved over time, and what are the key milestones in its history?
Jun 24, 2025 am 12:54 AM
HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout
How do I embed video in HTML using the element?
Jun 20, 2025 am 10:09 AM
To embed videos in HTML, use tags and specify the video source and attributes. 1. Use src attributes or elements to define the video path and format; 2. Add basic attributes such as controls, width, height; 3. To be compatible with different browsers, you can list MP4, WebM, Ogg and other formats; 4. Use controls, autoplay, muted, loop, preload and other attributes to control the playback behavior; 5. Use CSS to realize responsive layout to ensure that it is adapted to different screens. Correct combination of structure and attributes can ensure good display and functional support of the video.
