web前端9

最新推荐文章于 2023-09-04 15:24:24 发布

Bescheidenheit

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量74

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Bescheidenheit/article/details/103655650

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>笔记9</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style8.css">
</head>
<body>
    <div class="header">
        <div class="main">
            <div class="logol"></div>
            <div class="search"></div>
            <div class="tel"></div>
        </div>
    </div>
    <div class="nav">
        <div class="main">
            <ul>
                <li>网站</li>
                <li>网站</li>
                <li>网站</li>
                <li>网站</li>
                <li>网站</li>
                <li>网站</li>

            </ul>
        </div>
    </div>
    <div class="banner"></div>
    <div class="con">
        <div class="main"></div>
    </div>
    <div class="footer">
        <div class="main"></div>
    </div>
<!--
布局思路：
    从外向里
    从上至下
    从左至右    

样式编写顺序：
    1.定位（float position left right bottom top z-index）
    2.宽、高、边距
    3.文字样式
    4.背景样式
    5.过渡 动画

样式书写规范：
    1. 0.5可以写.5，0可以省略
    2. 对于可以简写的属性尽量简写 background margin padding border
    3. 给子元素添加样式前写父级类名
    4. 布局是尽量使用类，不要使用id

问题：
    1.乱码问题  编码
    2.样式引入无效问题（属性丢失，路径错误）
    3.清除浮动问题
    4.定位乱的问题---找绝对定位的父级添加相对定位
    5.a标签鼠标经过无效问题--a:link  a:visited  a:hover  a:active 


兼容性问题(CSS HACK)
    概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号
    CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
        1、属性级Hack：
            IE6能识别下划线“_”和星号“*”，
            IE7能识别星号“*”，但不能识别下划线”_ ”，
            而firefox两个都不能认识。
        2、选择符级Hack：
            IE6能识别*html .class{}，
            IE7能识别*+html .class{}或者*:first-child+html .class{}。
        3、IE条件注释Hack：
            IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
            针对所有IE：&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;，
            针对IE6及以下版本：&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;，
            这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
-->
</body>
</html>

Bescheidenheit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端9

<!DOCTYPE html><html><head> <title>笔记9</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style8.css"></head&gt...
复制链接

扫一扫