搭建静态页面经验

最新推荐文章于 2024-02-10 18:21:54 发布

agai0925

最新推荐文章于 2024-02-10 18:21:54 发布

阅读量158

点赞数

文章标签： html

本文链接：https://blog.csdn.net/agai25/article/details/115402680

版权

搭建静态页面经验

1.1css的分布

在css文件夹下创建两个文件夹，一个叫base，一个叫index，base用于存放公共样式，index用于存放不同网页对应的样式。css里应该定义一个版心，供所有页面使用。

1.2html框架

在head先引入css，在body写内容的时候最好写上注释，然后在css也写上注释，方便到时候容易找出错误所在，

在写轮播图的时候，给父盒子一个相对定位，给子盒子写一个绝对定位，在给子盒子的内容设置属性，就可以完成轮播图。

1.3margin-top总失效

（1）当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

解决方法：给子盒子设置浮动或者给父盒子设paddi-top：20px；

（2）外层DIV设置了高与宽，内层DIV如果设置maring-top不起作用

1、把margin-top改成padding-top,不过,前提是内层的Div没有设置边框
2、给外层的Div加padding-top
3、给外层DIV加：

A、float: left或right

B、position: absolute

C、display: inline-block或table-cell或其他 table 类型

D、overflow: hidden或auto

1.4不同元素的区别

行内元素特征：(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效 (3)不会自动进行换行

span    a    i
<span></span>
<a href="">超链接</a>
<em>斜体</em><i>斜体</i>
<b>加粗</b><strong>加粗</strong>

块状元素特征：(1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起，默认排列方式为从上至下

div，p、ul、li、ol、dl、dt、dd、nav等
<h1-h6>标题标签</h1-h6>
<p>段落标签</p>
<div></div>
<ul>无序列表</ul>
<ol>有序列表</ol>
<table>表格</table>
<form action="">表单</form>

行内块元素：特征：(1)不自动换行 (2)能够识别宽高(3)元素排列在一行;

img input

<img src="" alt="">图片
<input type="text">文本框
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
<select name="" id="">下拉菜单</select>
<button>按钮</button>

1.5html的布局

水平且垂直居中的三种方式

1、text-alig+inline-block+verticla-align

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css" />
    <style>
      /* 居中布局 */
      .parent {
        height: 500px; /* 设置为单元格后，同时宽度也不再是 100%，所以显式设置宽度*/
        width: 500px;
        text-align: center; /* 核心代码 */
        display: table-cell;  /* 核心代码 */
        vertical-align: middle; /* 核心代码 */
        background-color: #000;
      }
      .child {
        display: inline-block; /* 核心代码 */
        background-color: #ccc;
        padding: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">居中布局</div>
    </div>
  </body>
</html>

2、absolute+transform

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css" />
    <style>
      /* 居中布局 */
      .parent {
        position: relative;
        height: 500px; 
        width: 500px;        
        background-color: #000;
      }
      .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);  
        background-color: #ccc;
        padding: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">居中布局</div>
    </div>
  </body>
</html>

3、flex布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css" />
    <style>
      /* 居中布局 */
      .parent {
        display: flex; /* 核心代码 */
        justify-content: center; /* 核心代码 */
        align-items: center; /* 核心代码 */
        height: 500px;
        width: 500px;
        background-color: #000;
      }
      .child {
        background-color: #ccc;
        padding: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">居中布局</div>
    </div>
  </body>
</html>