A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

杨子康

初级黑马

  • 黑马币:17

  • 帖子:5

  • 精华:0

© 杨子康 初级黑马   /  2020-4-7 21:45  /  2274 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

发表一下自己所认知的图片插入
像网页中一般图片一使用
<img src="" alt="" title="">src:是路径 alt:可以直接放文字意思是呢当图片不能正常显示的时候显示该文字。
title:当鼠标悬停在图片上时显示文字。
还有一种图片加入是背景图片插入。
background-imageurl();
这个优点呢是不会撑大盒子的高度,也很方便控制位置。
还有一个高级的用法是精灵图也叫css雪碧 css sprites
精灵图可以有效地减少服务器接收发送的次数。
用法是把多个背景图放在一起引入后调位置即可。
关于图片插入底部留白
给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心线对齐
多的不说还是来说下本次的重点logo的写法
logo SEO优化
也可以说常用的标准写法
1、创建一个大盒子放一个h1标签用来提权。
2h1里面放一个a标签 a标签的练剑可以写index.html logo可以通过logo来引入。
3、为了搜索引擎更好的收录我们,在链接中加入网站名字,但文字不能直接显示出来。
处理方法:
方法1:样式中加入text-indent-9999px;然后把文字隐藏起来 overflowhidden;淘宝的做法。
方法2:样式中加入font-size0;京东的作法。
4、给a标签加入一个title属性 鼠标悬停logo的时候可以看到提示文字。
下面代码操作一遍
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好知网</title>
    <link rel="stylesheet" href="./css/css2.css">
</head>
<body>
    <div class="header w">
        <div class="logo fl">
            <h1>
                <a href="indext1.html" title="好知网">好知网</a>
            </h1>
        </div>
    </div>
</body>
</html>
样式--------
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #ccc;
   
}
.w {
    width: 1140px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.header{
    padding: 12.5px 0;
    height:  80px;
   
}
.header .logo{
  
    margin-left: 15px;
   
}
.header .logo a{
    width: 90px;
    height: 55px;
    display: block;
   background-image: url("../images/logo.png");
   font-size: 0;
}
css快速了解一下单词的语义
CSS引入方式
方式1:行内样式表
通过标签的style属性进行设置
方式2:内联样式表
通过style标签进行设置
方式3:外联样式表
通过link标签引用外部CSS文件
html中用<link rel="stylesheet" href="">
CSS文件中不要书写style标签
CSS语法格式
样式要写在{}中
所有的样式都是以键值对的形式出现的
属性与值之间通过 : 进行连接
每个属性的结尾都要有一个分号,而且建议一行一个样式
注释:/* */

常用选择器
标签选择器:通过标签的名字进行选择
选择器:通过class属性的值进行选择,语法:’.’
id选择器:通过id属性的值进行选择,语法:’#’
并集选择器:使用逗号隔开多个选择器选择的结果进行统一设置
后代选择器:通过一层一层的元素定位进行选择,多个层级之间使用空格隔开
子选择器:使用>隔开父元素和子元素
属性选择器:根据元素的属性值进行选择
伪类选择器:通常用于标识标签的不同状态,如:a:link
通用选择器:使用’*'进行选择,会选中所有元素,尽量不用。
选择器的优先级
使用说明:
尽量避免使用多种方式同时修改样式
尽量避免多处同时修改同一标签的同一样式
优先级相同,后面的会覆盖前面的效果
如果还有优先级问题,可以使用chrome调试工具进行检查定位
尺寸及单位
说明:在HTML中可以不写单位,但是在CSS中必须书写。
单位:
px:像素,绝对单位
%:百分比,相对单位,相对于父级元素
em:相对于父级元素的倍数
rem:相对于HTML元素的倍数
width:宽度
height:高度
min-width:最小宽度
max-width:最大宽度
min-height:最小高度
max-height:最大高度
字体设置
font-style:normal(正常)、italic(斜体)
font-weight:normal(正常)、bold(加粗)
font-size:字体大小
font-family:字体族
font:简化的书写方案,可以进行一次性设置
顺序是固定的
font-size和font-family不能省略
如:font: italic bold 30px 宋体;
文本修饰
text-indent:缩进
overflow:超出容器的内容如何处理
text-decoration:文本横线的显示处理
text-align:水平对齐方式
line-height:行高,若设置为容器高度可以实现垂直居中
vertical-align:行级标签之间垂直对齐(top、bottom、middle)
背景设置
background-color:背景颜色
background-image:背景图片
background-repeat:背景图片的重复方式
background-position:背景图片的位置
background-attachement:附着方式
scroll:相对于元素固定
fixed:相对于窗体固定
local:相对于元素内容固定
background:简化书写
示例:background: url(bd_logo.png) no-repeat right top local;

定位相关
position:元素定位
static:静态,默认方式,四个偏移属性无效
relative:相对定位,相对于自身在文档流的位置
fixed:固定定位,相对于窗体定位
absolute:绝对定位,相对于最先定位的祖先元素进行定位,直到body
子绝父相:子元素绝对定位父元素相对定位常用
z-index:z方向的偏移,没有单位,值为一个数即可,值越大越靠上。
布局相关
float:浮动,left、right
visibility:visible、hidden,隐藏时元素的位置会保留
display:
none,会隐藏元素,并且元素位置也没有了
block:块元素
inline:行元素
inline-block:行内块
清除浮动:
1、额外标签法在尾部添加一个.clear{clear:both}必须是块级元素
2、父元素添加 overflow属性
Overflow:hidden/auto/scroll;  溢出隐藏多用于练习
3、父元素添加:after伪元素法
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}
.clearfix {
    *zoom: 1;
}
4、父元素添加双伪元素法
.clearfix:before, .clearfix:after {
content: ""; display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { *zoom: 1; }
盒子模型
尺寸:width、height
边框:border、border-radius
内边距:padding
外边距:margin,垂直方向会取较大值,水平方向会叠加
位置:
宽度 = width + 左右边框 + 左右内边距 + 左右外边距
高度 = height

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马