html，css基础开发经验模块

最新推荐文章于 2022-01-06 02:23:58 发布

Diamonds、

最新推荐文章于 2022-01-06 02:23:58 发布

阅读量252

点赞数 1

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44931166/article/details/103604939

版权

web 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

各个模块命名规范

在这里插入图片描述

CSS盒模型详解
 常用的多列等高布局
 104道 CSS 面试题，助你查漏补缺
 值得收藏的 104个 CSS 面试题
 55 个提高你 CSS 开发效率的必备片段
 html/css 简单的表单实例
 前端必看的8个HTML+CSS技巧

一.logo编写规范

HTML代码
h1是hn标签中最重要的标签，一般都个网页只能有一个，所以把logo放在h1标签，爬虫就很容易抓取到logo的信息。

	<div class="logo">
        <h1>
            <a href="#">
                <span>标题</span>
            </a>
        </h1>
    </div>

CSS代码

.logo a {
    width: 154px;
    height: 30px;
    display: block;/*因为a元素是行元素，设置宽高没有用，所以要设置成块元素*/
    background: coral no-repeat;/*no-repeat的意思是背景图像将仅显示一次。 */
    
}

.logo a span {
    display: none;/*令文字消失*/
}

二.nav导航栏编写规范

HTML代码

<u class="nav">
        <li class="list-item">
            <a href="">内容1</a>
        </li>
        <li class="list-item">
            <a href="">内容2</a>
        </li>
        <li class="list-item">
            <a href="">内容3</a>
        </li>
    </u>

CSS代码

* {
            margin: 0;
            padding: 0;
            color: #424242;/*令所有的字体都是标准的黑色*/
            font-family: Arial;/*令所有的字体都是标准字体*/
        }
        
        .nav {
            list-style: none;/*去除li左边小点点的样式*/
        }
        
        .nav::after {
            content: "";
            clear: both;
            display: block;
        }/*清除浮动效果*/

        .nav .list-item {
            float: left;
            margin: 0 10px;
            height: 30px;
            border: 1px solid chartreuse;
            line-height: 30px;
        }
        
        .nav .list-item a {
            text-decoration: none;/*去除a元素的下划线*/
            font-weight: bold;/*字体加粗*/
            height: 30px;/*令a元素占满整个li*/
            display: inline-block;/*因为a元素是行元素，所以height不能生效，所以要变成块元素*/
            padding: 0 5px;/*给a元素与块元素两边增加距离*/
            border-radius: 15px;/*可以给a元素增加圆角效果*/
        }/*令鼠标移动到a标签都的效果*/
        
        .nav .list-item a:hover {
            background-color: #f40;
            color: #fff;
        }

效果如下
在这里插入图片描述

三.文字溢出处理，背景图片处理

文字溢出处理（很多单行文本在开发过程中基本都会使用）
当一个块元素设置宽高以后，当里面的内容装满以后他会溢出来

html代码

<p>溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p>

css代码

        p {
            width: 300px;
            height: 20px;
            line-height: 20px;
            border: 1px solid black;
        }

当溢出后，在溢出的容器里面加三行代码（写死的）

	p {
            width: 300px;
            height: 20px;
            line-height: 20px;
            border: 1px solid black;
            /*后面这三行代码是写死的，处理文字溢出的效果*/
            white-space: nowrap;/*让文本失去换行功能*/
            overflow: hidden;/*溢出部分不能展示*/
            text-overflow: ellipsis;/*溢出部分用点点点展示*/
        }

在这里插入图片描述

背景图片处理
在盒子里面设置背景图片
主要代码介绍
设置背景图片大小，如果图片过大则出现图一效果，如果图片刚刚好则出现图二效果，如果图片过小则出现图三效果

 background-size: 100px 100px;/* 设置背景图片的大小 */

设置图片是否重复，重复则出现图三效果，设置不重复则出现图四效果，但是不居中

background-repeat: no-repeat;/*不重复出现，一张图片就一张图片*/

设置背景图片在本元素中的定位，后面的值也可以用像素

background-position: center center;/*设置背景图片在本元素中的定位，后面的值也可以用像素*/

可以设置一下四种效果
在这里插入图片描述

 div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-image: url(fy.jpg);/*url是背景图片的地址*/
            float: left;
            
            
        }
        
        .b {/*第二张图*/
            background-size: 200px 200px;/* 设置背景图片的大小 */
        }
        
        .c {/*第三张图*/
            background-size: 100px 100px;
        }
        
        .d {/*第四张图*/
            background-size: 100px 100px;/* 设置背景图片的大小 */
            background-repeat: no-repeat;/*不重复出现，一张图片就一张图片*/
            background-position: center center;/*设置背景图片在本元素中的定位，后面的值也可以用像素*/
        }

四.css开发小问题

在开发过程中display属性中的三种属性：inline ，inline-block，block
其中inline 和inline-block叫–>文本类元素
凡是带有inline属性的元素都有文本类特点
文本类有啥特点呢
比如写一个串文字，中间用空格隔开，这个空格表示文字分隔符，所以文字中间会有一个小的空余，这多少个空格都不好使。
文本类元素也符合这个特点比如span元素，img也会出现这种效果，为啥img也会出现这样效果呢，因为img是inline-block元素
那怎么解决这种问题呢：直接把中间的空格和回车（文字分隔符）去掉就好了

<div>
        第一串元素 第一串元素 第一串元素
    </div>
    <div>
        <span>第二串元素</span>
        <span>第二串元素</span>
    </div>
    <div>
        <span>第三串元素</span><span>第三串元素</span>
    </div>

行元设置宽高没有效果
给行元素设置下面这两种种属性
是什么原因呢，只要这两个属性设置其中的一个，这个元素就会在内部被转换成display: inline-block;所以就可以用了

float: left/right;
position: absolute;

文本元素的特点
对齐方式，在一行文本里面，他的文字内容是底对齐，因为img也是本文类元素，所以，图片跟文字也是底对齐
当span元素设置宽高没内容时，他会跟盒子的底部对齐，
当span元素设置宽高有内容时，他会跟盒子里面的内容的底部对齐。
还可以用vertical-align: 像素值; 调一行元素的对齐线。
没有重置padding跟margin的后果
web本身很多元素自带padding和margin，所以开头一定要重置padding跟margin
代码如下

*{
padding:0px;
margin:0px;
}

否则布局时会出现以下情况
在这里插入图片描述
由于ul自带的padding跟margin把ul跟盒子分隔开。

实现文字竖排

//css
div {
	writing-mode: vertical-rl;
}

//html
<div class="a">
	你好啊
</div>

在这里插入图片描述

实现文字对齐

div {
	background: #999999;
	width: 140px;
	height: 50px;
	text-align-last: justify;    //实现文字对齐
	padding: 0 14px;
	line-height: 50px;			//高度居中
}

<div class="a">
        你好啊
</div>

在这里插入图片描述

禁用事件触发
作用，禁用默认事件、冒泡事件、鼠标事件、键盘事件等

.disabled-trigger{
	pointer-events: none;
}

用纯css实现三角形

width: 0px;
height: 0px;
border-bottom: 20px solid #000;
border-left: 20px solid transparent;
/* transparent是透明色 */
border-right: 20px solid transparent;

效果
在这里插入图片描述

图片的间隙问题

当两个图片放在一起时中间会出现一个空隙

第一种处理方法（回车处理掉）
第二种（给图片添加浮动）
第三种（给图片添加display:block）

标题小图标的添加

图标文件后缀为ico
图片文件要放在项目的根目录下

调用图标
<link rel="icon" href="favicon.ico">

自定义小图标

iconfont官网
先在js文件中引入（引用的代码都放在css文件里面）
下载的代码放在font文件里面，然后从font文件里面去引用

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/iconfont.woff2') format('woff2'), 
    url('../font/iconfont.woff') format('woff'),
     url('../font/iconfont.ttf') format('truetype'), 
     url('../font/iconfont.svg#iconfont') format('svg');
}

盒模型（解决计算盒子宽高被padding或者border撑大）

盒模型
1.标准盒模型
总宽度=border（左右）+width+padding（左右）
总高度=border（左右）+height+padding（左右）
2.IE盒模型（怪异盒模型）
总宽度=width；
总高度=height；

box-sizing:border-box;/*  变成IE盒模型*/

Diamonds、

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html，css基础开发经验模块

1.各个模块命名规范
复制链接

扫一扫

专栏目录