search
HomeWeb Front-endHTML TutorialCSS查缺补漏篇 - 小花大方

  前面的话:关于CSS,之前我已经做过一些基础的知识点介绍。CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中。样式的设置总体来说是不难的,但是需要足够的细心和耐心,本人之前做简单的静态页面时,也常出现bug,比如说清除浮动、圣杯布局等问题。这些知识点不难,但是很琐碎,本人也尚未能够整理完全,之后我也会根据具体问题做出具体分析,今天主要是对上次做的总结查缺补漏,有兴趣的可以在下面互相交流哟。

1、fireworks工具

  ——该工具的使用是根据设计图来进行网页的编写,常用的还有picpick等,本人惯用这一款工具,下面是对该工具的简单介绍。

    1.1 正常切换

K V H Z U T I G
切片 小黑 小手 缩放 图形 文本 取色 填色

    1.2临时切换

ctrl——小黑 ctrl+空格——放大
空格——小手 ctrl+Alt+空格——缩小
普通的放大缩小会自动移动到图片中间,临时的放大缩小仍然在原来的位置,使用起来很方便(Ctrl+N新建;Ctrl+O打开)

    1.3其他技巧

        不需要的辅助线,拖回到标尺上会自动删除;

        Ctrl+加号或者滚轮 放大图片 Ctrl+减号或者滚轮 缩小图片(不方便)

    1.4 在测量图片之前要锁定图片:

           

2、网站的两种构建策略

渐进增强——progressive enhancement,一开始只构建站点的最少特性,然后不断针对各浏览器追加功能

优雅降级——graceful degradation,一开始就构建站点的完整功能,然后针对浏览器测试和修复

3、常见布局简介

    1)固定布局 Fixed Layout

    2)响应式布局 Responsive Layout

    3)流式布局 Fluid Layout

    4)栅格布局 Grid Layout

    5)瀑布流布局 Waterfall Layout

    6)圣杯布局、双飞翼布局 Holy Grail Layout 两边固定中间流动

4、设置网站图标

    4.1 打开http://www.jd.com/favicon.ico即可看到网站图标;右键单击图标,选择图片另存为并保存到本地;

    4.2 将图标放在根目录下(也可以是其他目录),在页面源文件的

标签之间插入

                            

    4.3 shortcut 捷径 快捷方式

    4.4 使用网页图标的网站:http://www.bitbug.net/

5、引用样式文件

 
 
注意引用顺序:base是公共样式,index是特定样式,特定网页的样式应该放在公共样式后面,以便对其进行覆盖
link标签   了解即可
charset 被链接文档的字符编码方式 几乎没有主流浏览器支持该属性
href 被链接文档的位置  
hreflang 被链接文档中文本的语言  
rel 被链接文档与当前文档之间的关系 常用的有stylesheet 和 shortcut icon   (sizes——网站图标的尺寸,仅适用于 rel="icon")
rev 与rel相反 reversed relationship 几乎没有主流浏览器支持该属性
target 被链接文档在哪个窗口或框架中加载 几乎没有主流浏览器支持该属性
type 被链接文档类型  

6、层级

    6.1 一定要记得加定位,否则z-index不生效

    6.2 后面的盒子会压住前面的盒子,z-index高的盒子会压住z-index低的盒子;盒子不是自身z-index越高就一定会越靠上,除了看他自身还要看他们的父级,父级层级越高的,子级越靠上。

    总结: 层级不但要比较子级,还要比较父级(拼爹)。z-index理论上没有最大值,但实际上是21474836472的32次方;最小值不是0,可以取负数。

7、CSS3圆角(border-radius 边框-半径)

       7.1 CSS3属性,用于向元素添加圆角边框:

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

      7.2 简写形式: border-radius:2px;   顺序从左上角开始顺时针设置(左上 右上 右下 左下)

8、绝对定位可以改变元素的显示方式,但相对定位不可以

9、半透明效果:

        background:rgba(0,0,0,.2);

                    red green blue alpha (红色值 绿色值 蓝色值 透明度)

                    色值取值范围是0~255;透明度取值范围是0~1;如果是零点几,前面的零可以省略。

 

 

补充一:Emmet语法

http://docs.emmet.io/cheat-sheet/

补充二:网页性能优化

css压缩

http://tool.oschina.net/jscompress/

网页性能测试

http://www.webpagetest.org/

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Beyond HTML: Essential Technologies for Web DevelopmentBeyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AM

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools