• HTML整站规划与规范

    文章目录

    命名规则

    命名

    根据每块元素的主题、功能、页面上的位置命名，便于后期更改与维护。
    另外：如果所有样式放在同一文件下，可以给每个页面起简称防止命名冲突，如：iPicTab、pPicTab。

    命名书写

    可以参照以下某一个规则进行全站书写
    php规则命名：每个单词中间以"_"隔开，如: #main_left_box{}
    驼峰命名：从第二个单词开始，每个单词首字母大写，如：#mainLeftBox{}

    包含样式规范

    写包含样式的时候能找到这个元素并且不影响其他元素即可，不需要列出所有元素
    冗杂举例：#whyQq ol li h3 a {}
    正常举例：#whyQq a {}

    样式重置

    用到那个标签，对那个标签进行重置。

    样式引入

    <link rel="stylesheet" href="css/index.css">

    • 1

    页面结构

    页面宽度

    实际内容宽度，并不包括没有内容的两边。

    页面高度与背景

    当页面背景图片像素小于实际高度时。可以同时添加背景色，使得网页不突兀。

    body{margin: 0;background: url(/img/bg.gif) repeat-x #d9e2ce; height: 2000px;}

    • 1

    页面设计

    <div class="wrap"> 
        <div class="header">div>
        <ul class="nav">ul>
        <div class="main">div>
  div>

    • 1
    • 2
    • 3
    • 4
    • 5

    将页面内容用一个div包裹起来：
    1.html按照每个标签加载内容，所以同一个div整个页面会同时加载显示所有内容，加载较长页面时，用户体验不友好。
    2.并不利于后期扩展。

    建议布局

    <div id="header">     
        <div class="header wrap">div>    
    div>
    <ul id="nav" class="wrap">ul>
    <div id="picTab" class="wrap">div>
    <div id="whyQQ" class="wrap">div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    网址图标

    <link rel="icon" href="/img/aiv01-79xtx-001.ico">

    • 1

    示例
    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="/img/aiv01-79xtx-001.ico">
    <title>Documenttitle>
    

    
head>
<body>
    <div id="header">     
        <div class="header wrap">div>    
    div>
    <ul id="nav" class="wrap">
        <li>
            <a class="active" href="index.html" >首  页a>
        li>
        <li>
            <a href="index.html" >产品介绍a>
        li>
        <li>
            <a href="index.html" >企业空间a>
        li>
        <li>
            <a href="index.html" >成功案例a>
        li>
        <li>
            <a href="index.html" >产品支持a>
        li>
        <li>
            <a href="index.html" >产品帮助a>
        li>
        <li>
            <a href="index.html" >产品帮助a>
        li>
    ul>
    <div id="picTab" class="wrap">div>
    <div id="whyQQ" class="wrap">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    @charset "utf-8";

/*reset*/
body{margin: 0;background: url(/img/bg.gif) repeat-x #d9e2ce; min-width: 960px; }
a{text-decoration: none;}
li{list-style: none;}
.wrap{width: 960px; margin: 0 auto;}
#header{background: url(/img/head_bg.jpg) no-repeat center 0 ;height: 120px;}
.header{height: 94px;}
 #nav{height: 43px; background: url(/img/nav_bg.png) no-repeat;}
 #nav li{float: left;width: 118px;padding-right: 8px;position: relative; } 
 #nav a{display: block;padding-top: 1px;line-height: 42px; font-size: 16px;color: #fdfbf9;text-align: center;background: url(/img/nav_hover.png) no-repeat center 50px;}
 #nav a:hover,#nav .active{background-position: center 0;}


/*public*/


/*end  public*/


/*index*/


/*end  index*/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
  • 相关阅读:
    Python接口自动化实战案例
    昂首资本通过套期保值，MT4和MT5这样选
    【Python编程】二、基本语法
    C Primer Plus(6) 中文版 第5章 运算符、表达式和语句 5.4 表达式和语句
    Node.js开发实战- day1-简介
    2020 icpc 昆明 B. Chessboard 有源汇有上下界最小费用可行流 强制满流
    线性回归
    基于51单片机的舞蹈机器人四路步进电机控制仿真
    LCD1602指定位置显示字符串-详细版
    Linux每日智囊
  • 原文地址：https://blog.csdn.net/weixin_45496521/article/details/132900064