2.web前端开发（二）0226 css基础

最新推荐文章于 2024-08-09 11:41:07 发布
最新推荐文章于 2024-08-09 11:41:07 发布
阅读量294 收藏 1
点赞数 1
分类专栏： 2.web前端开发 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guozhuanchen/article/details/114141515
版权
本文详细介绍了CSS的基础知识，包括如何通过外链样式、内嵌样式和行内样式将CSS与HTML关联起来。重点讲解了CSS的选择器，如id、类和标签选择器，以及关系、全局、伪类和群组选择器。内容涵盖了对元素的文字、背景、边框和内边距等属性的修饰，以及盒模型的设置和布局技巧。还涉及了浮动、定位以及转换行内元素为块元素等实践操作。
摘要由CSDN通过智能技术生成

一、css概述

1.层叠样式表
2.对html写的那些标签 变得美观
3.css标签大全
http://www.mamicode.com/info-detail-2186911.html

二、如何让html和css联系起来呢

css给html加样式的格式是：
标签名{属性key:属性value;属性key:属性value;}
在这里插入图片描述

将html和css连接起来的方式有外链样式、内嵌样式、行内式 下面依次介绍

（一）外链样式

建一个css文件，把要改变的样式写在css文件里，然后在html文件里面引用该css文件

步骤1：新建一个css文件
在这里插入图片描述
步骤2：在html文件中引用该css文件
在这里插入图片描述
步骤3：运行 出效果
在这里插入图片描述

代码：
1.css部分

h1{color:rgb(255, 0, 140);}

2.html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习css</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">

</head>

<body>
    <h1>我的妈妈</h1>
    <h1>我的爸爸</h1>
    <h1>我的奶奶</h1>
    <h1>我的弟弟</h1>
    <p><b>我的妈妈是一个可爱善良的人1</b></p>
    <p><b>我的妈妈是一个可爱善良的人2</b></p>
    <p><b>我的妈妈是一个可爱善良的人3</b></p>
    <p><b>我的妈妈是一个可爱善良的人4</b></p>
</body>
</html>

（二）内嵌样式

在html文件的head里面 新增style标签 在style标签中加入css格式的样式

<style>
        h1{color: darkkhaki;}
        p{color: darkmagenta;}
    </style>

在这里插入图片描述

（三）行内样式

之间在标签旁边加入对标签的css格式，style=“属性key:属性value”

style="color: darksalmon;"

在这里插入图片描述

三、css如何去选择html里的元素呢

css能够找 到对html里的那个元素进行变化样式，有几大常用的方式
通过元素的id、类名、标签名、关系、全局、伪类选择器、群组选择

（一）id选择器 通过html标签的id，css可以找到自己需要去修改样式的标签

id是通过#去找元素的
id可以唯一定位一个元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        #zhangsan{color: rgb(105, 153, 51);}
        #我的爸爸{color: rgb(67, 248, 61);}
        #的{color: royalblue;}
    </style>

</head>
<body>
    <h1 id="zhangsan">我的妈妈</h1>
    <h1 id="我的爸爸">我的爸爸</h1>
    <h1 >我的奶奶</h1>
    <h1 >我的弟弟</h1>
    <p id="一个可"><b>我的妈妈是一个可爱善良的人1</b></p>
    <p><b>我的妈妈是一个可爱善良的人2</b></p>
    <p id="的"><b>我的妈妈是一个可爱善良的人3</b></p>
    <p><b>我的妈妈是一个可爱善良的人4</b></p>
    
</body>
</html>

（二）类选择器 通过html标签的class，css可以找到自己需要去修改样式的标签

类class是通过.去找元素的
class是指某些标签属于同一类 他们有共同的特征可以让css去给他们设置样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class</title>
    <style>
        .名字{color: salmon;}
    </style>

</head>
<body>
    <h1 class="名字">我的妈妈</h1>
    <h1>我的爸爸</h1>
    <h1>我的奶奶</h1>
    <h1 class="名字">我的弟弟</h1>
    <p><b>我的妈妈是一个可爱善良的人1</b></p>
    <p><b>我的妈妈是一个可爱善良的人2</b></p>
    <p><b>我的妈妈是一个可爱善良的人3</b></p>
    <p class="名字"><b>我的妈妈是一个可爱善良的人4</b></p>
</body>
</html>

注意：下图问题
在这里插入图片描述

（三）标签选择器 通过html标签的名字，css可以找到自己需要去修改样式的标签

会对下面的所有的该标签名生效
在这里插入图片描述

**（四）关系选择器（派生选择器）

通过先定位能定位到的 再往后定位没有id或class的，css可以找到自己需要去修改样式的标签**
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系</title>
    <style>
        .div的哦 ul li{color: seagreen;}
    </style>
</head>
<body>
    <div class="div的哦">
        <ul>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
        </ul>
    </div>
</body>
</html>

（五）全局选择器 对全部的元素生效

全局的是*
在这里插入图片描述

（六）伪类选择器 只要针对a标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌样式</title>
    <style>
        a:link{color: slateblue;}  /*访问前*/
        a:visited{color: slategrey;} /*访问后*/
        a:active{color:red;} /*访问中*/
        a:hover{color: springgreen;} /*鼠标划过*/
    </style>
</head>

<body>
    <a href="https://www.baidu.com/" target="__blank">百度一下</a>
</body>

</html>

（七）群组选择器

.a,.b,.c
在这里插入图片描述

四、css可以对html里的元素进行哪些修饰呢

比如上面的例子中都是对颜色做了美化

（一）文字属性

在这里插入图片描述

（二）对块儿标签设置背景属性

在这里插入图片描述
在这里插入图片描述
也可以同时设置多个 省事一些
在这里插入图片描述

（三）文字修饰属性

在这里插入图片描述

（四）无序列表属性

在这里插入图片描述

五、css对div盒模型进行设置

在这里插入图片描述

（一）边框属性 border

在这里插入图片描述

备注：
1.border-width的值有以下4种写法：
写法1：20px 30px 40px 50px;
4个数字 分别代表
20px 上边框的宽度
30px 右边框的宽度
40px 下边框的宽度
50px 左边框的宽度
写法2：10px 代表上下左右边框的宽度都是10px
写法3：10px 50px 代表上下边框是10px 左右边框是50px
写法4：10px 20px 30px 代表上10 左右20 下30

2.border-style的其他用法
写法1：border-style: solid 代表四条边都是实线
写法2：border-top-style:solid 代表上边框是实线
写法3：border-bottom-style:solid 代表下边框是实线
写法4：border-left-style:solid 代表左边框是实线
写法5：border-right-style:solid 代表右边框是实线

3.border-color的其他用法
写法1：border-color: black 代表四条边都是黑色
写法2：border-top-color: black 代表上边都是黑色
写法3：border-bottom-color: black 代表下边都是黑色
写法4：border-left-color: black 代表左边都是黑色
写法5：border-right-color: black 代表右边都是黑色

4.一个一个的写比较麻烦 也可以写复合属性
属性名是 border
在这里插入图片描述
当然 也可以指定边框去以符合属性值的方式填写
在这里插入图片描述
5.去除边框的方式
01 border-width:0
02 border:none
03
border-top:none
border-bottom:none
border-right:none
border-left:none
04
border-style:none

（二）外边距 margin

margin主要指的是标签与标签之间的距离 主要有下图中五种外边距的写法
在这里插入图片描述

可以上下左右去写
margin-top: 10px;
margin-bottom: 50px;
margin-left: 40px;
margin-right: 40px;
在这里插入图片描述
也可以只写一个margin
在这里插入图片描述
margin: 60px; 上下左右都是60
margin: 30px 60px; 上下30 左右60
margin: 30px 40px 60px; 上30 左右40 下60
margin: 20px 30px 40px 60px; 上20 下30 左40 右60

如何居中
margin:0 auto;
在这里插入图片描述

（三）内边距 padding

主要指的是内容和边框之间的距离
理论类似于买手机时里面的泡沫距离手机的距离

可以上下左右分开写
padding-top: 200px;
padding-left: 100px;
在这里插入图片描述
也可以只写一个
在这里插入图片描述

注意：
内边距要小于整个盒子的宽高 否则里面的padding加上内容本身的长度 盒子会变大
一个盒子的宽=左边框的宽度+左边内容与边框的宽度+内容的宽度+右边内容与边框的宽度+右边框的宽度
高度同理
在这里插入图片描述

五、css如何实现盒子的布局呢？

（一）需要注意的点
1.只有块元素才能浮动 这里一般是div的浮动
2.现在的块元素是上下布局
3.我们的布局目的是：让上下布局的东西变成左右布局

（二）如何浮动
注意：
如果浮动某个盒子 其他的会依次补位
如果让2和1是一行 那么需要1和2同时加上float
经常使用float:left
若对上面的盒子设置了浮动 下面的盒子要清楚浮动 clear:both

1.方式1 全部设置向左float
在这里插入图片描述

2.方式2 前两个向左，后面一个向右
在这里插入图片描述
3.方式3 如何做到前两个左右布局 后一个上下布局
在这里插入图片描述

4.方式4：如何做到第一个不动 第二和三并列呢
在这里插入图片描述

六、常用的几大实操部分

（一）如何做导航
方式1：a标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习导航</title>
    <style>
        a{
            /* 清除下划线 */
        text-decoration: none;
        /* 改变字体颜色 */
        color: black;
        /* 改变字体大小 */
        font-size: 18px;
        /* 改变右边距 */
        margin-right: 30px;}
        /* 鼠标滑过时候 颜色变换 */
        a:hover{color: rgb(53, 32, 241);}
    </style>
</head>
<body>
    <!-- 给整个盒子设置上外边距  更好看-->
    <div style="margin-top: 40px;">
        <!-- 点击链接 进入新闻 并且进入新的网页 因为第一个离的左边远 所以再行内设置一个左外边距 -->
        <a href="http://news.baidu.com/" target="__blank" style="margin-left: 40px;">新闻</a>
        <a href="https://www.hao123.com/" target="__blank" >hao123</a>
        <a href="https://map.baidu.com/@13374566,3524543,13z" target="__blank">地图</a>
        <a href="https://live.baidu.com/" target="__blank">直播</a>
        <a href="" target="__blank">视频</a>
        <a href="" target="__blank">贴吧</a>
        <a href="" target="__blank">学术</a>
        <a href="" target="__blank">更多</a>
    </div>
</body>
</html>

方式2：无序列表或有序列表
无序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航-无序列表有序列表</title>
    <style>
        ul{list-style-type: none;}
        ul a{text-decoration: none;color: black;font-size: 18px;}
        ul a:hover{color: blue;}
        ul li{float: left; margin-left: 30px;}

    </style>
</head>
<body>
    <div width=200px height=300px style="margin-top:40px;">
        <!-- 注意：li是块儿元素 -->
        <ul>
            <li style="margin-left: 40px;"><a href="">新闻</a></li>
            <li><a href="">视频</a></li>
            <li><a href="">地图</a></li>
            <li><a href="">直播</a></li>
        </ul>
    </div>
</body>
</html>

有序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航-无序列表有序列表</title>
    <style>
        ol{list-style-type: none;}
        a{text-decoration: none;color: black;font-size: large;}
        a:hover{color: rgb(33, 245, 13);}
        li{float: left;margin-left: 40px;}

    </style>
</head>
<body>
    <ol>
        <li style="margin-left: 50px;"><a href="">新闻</a></li>
        <li><a href="">视频</a></li>
        <li><a href="">地图</a></li>
        <li><a href="">直播</a></li>
    </ol>

</body>
</html>

方式3：行内元素转块元素 display: inline-block;
在这里插入图片描述
（二）如何给无序列表变颜色
在这里插入图片描述

七、定位

一共有三种定位：相对定位 绝对定位 固定定位
https://baijiahao.baidu.com/s?id=1620193018460734299
（一）相对定位
元素相对于自己原来的位置 进行移动 position:relative
左边边移动 就是 left
上边边移动 就是 top

未加定位前：
在这里插入图片描述

加定位后
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{border: rgb(255, 72, 0) 1px solid;margin: 0; width: 300px; height: 300px;}
        #old{border: springgreen 1px solid;margin: 0;width: 50px;height: 50px;}
        /* #new{border: rgb(213, 248, 14) 1px solid;margin: 0;width: 50px;height: 50px;display: inline-block} */

        #new{display: inline-block;border: rgb(213, 248, 14) 1px solid;margin: 0;width: 50px;height: 50px;position: relative;left:50px;top: 50px;}
        
    </style>

</head>
<body>
    <div>
        
        <a id="new">01</a>
        <a href="" style="width: 30px;height: 30px;border: solid red 1px;">02</a>
        <p id="old">03</p>
    </div>
</body>
</html>

将需要相对定位的元素上加入下图：
在这里插入图片描述

（二）绝对定位
相对最进的 设置了position:relative的父级元素 进行修改位置

未加定位前:
在这里插入图片描述
加里定位后
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #fuji{
            border: red solid 1px;
            margin: 0;
            width: 300px;
            height: 300px;
            position: relative;
        }

        #ziji{
            border: springgreen solid 1px;
            width: 30px;
            height: 30px;
            margin: 0;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>

</head>
<body>
    <div id="fuji">
        <p id="ziji">我</p>
    </div>
</body>
</html>

注意：如果一直往上找不到父元素有position的 会以body为依据

（三）固定定位

固定在某一个地方
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #fuji{
            border: red solid 1px;
            margin: 0;
            width: 400px;
            height: 400px;
            position: relative;
        }

        #ziji{
            border: springgreen solid 1px;
            width: 30px;
            height: 30px;
            margin: 0;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        #固定{
            border: rgb(241, 16, 193) solid 1px;
            width: 60px;
            height: 60px;
            margin: 0;
            position: fixed;
            left: 600px;
            top: 600px;
        }
    </style>

</head>
<body>
    <div id="fuji">
        <p id="ziji">我</p>
        <p id="固定">固定我</p>
    </div>
</body>
</html>

八、补充知识点合集

（一）由于行内元素只能设置左右边距 如何使得块元素和行内元素互转
display: block
display: inline
display: inline-block 既是行内又是块
在这里插入图片描述

**（二）p标签如何自动换行 word-wrap: break-word **
用法：http://www.divcss5.com/rumen/r57095.shtml

未自动换行前：
在这里插入图片描述

自动换行后
在这里插入图片描述
**（三）块标签如何设置圆角 **
border-radius: 3px 6px 10px 25px
在这里插入图片描述

知识点总结：
在这里插入图片描述

转辰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习：第一阶段05
Mr_qing的博客
11-21 128
一、列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{
2019最新CSS基础知识学习
weixin_44711712的博客
06-28 372
CSS基础 一、CSS概述 1、css作用 提出统一的方式来修改页面元素的“样式” 2、什么是CSS Css：cascading style sheet 级联样式表或层叠样式表，俗称：样式表 3、css的优势 1.实现了“内容”与“表现”的分离 2.更大程度的去提高代码的可重用性和可维护性 4、css的使用方式 1.内联样式（行内样式） 将样式定义在单个的html元素里的 使用方式：将样式定义在s...
html css 简历底纹,有了这些CSS套路，你也可以做一个漂亮的简历
weixin_39783512的博客
06-24 340
简历效果预览：简历原图预览 Resume预备知识HTML 基本标签CSS 基本知识DIV+CSS 布局知识套路：浮动与清除浮动块元素和内联元素的区别和用法工具的使用：阴影效果的制作一、结构分类头部导航条制作遮罩层制作头像、信息展示层自我介绍层制作技能进度条制作作品集制作说明：以上结构分类仅仅是个人分类方式，按照不同需求可以有不同的分类方式。二、头部导航条制作效果图 ：导航条分析：(1)头部导航条分...
vue 动态修改margin-top_详解 vue 组件三大核心概念
weixin_39621860的博客
02-03 6524
(给前端大全加星标，提升前端技能)作者：前端工匠 公号 / 浪里行舟 (本文来自作者投稿)前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳https://github.com/ljianshu/Blog，纸上得来终觉浅，大家动手多敲敲代码！一...
前端-02CSS基础知识3
qq_36061396的博客
11-09 356
1.行高 line-height 浏览器默认文字大小：16px 行高是文本行基线间的垂直距离（基线与基线位置） 行高=文字高度+上下边距 行高实战 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行高</title> ...
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
Web前端开发基础：CSS制作电子相册.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 ...
Web前端开发规范｜CSS手册｜W3c手册资料合集
02-16
Web前端开发规范、CSS手册以及W3C手册资料合集是前端开发者不可或缺的学习资源，它们涵盖了前端开发的基础知识、最佳实践以及最新的标准指南。在这个资料合集中，"小趴菜前端资料合集"可能包含了丰富的教程、实战...
Web前端开发基础：CSS控制表单.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 使用CSS控制页面背景、表格、表单 能力目标 学会使用CSS控制表单 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 ...
Web前端开发基础：CSS控制图文混排.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...
头歌教学实践平台 Web前端开发基础 CSS-基础知识
01-20
在Web前端开发中，CSS（层叠样式表）是至关重要的组成部分，它负责网页的布局和样式设计。在这个“头歌教学实践平台”的课程中，我们聚焦于CSS的基础知识，帮助初学者掌握这一核心技术。 首先，我们需要理解CSS的...
margin-top bug
weixin_33778778的博客
06-03 107
margin-top bug 代码如下： 1 <div>上部层</div> 2 <div> <!--父层--> 3 <div style="margin-top:200px;">子层</div> 4 </div> 理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离...
前端小白的html+css入门笔记
weixin_43403543的博客
03-16 1257
mata标签规定字符集 ！！规定的字符集和编辑软件保存发类型要一致（utf-8/gbk） Utf-8：包含所有语言，不包含加载速度。 Gbk：大量中文/要求速度
html基础-几种布局
m0_53161190的博客
07-21 1832
1.html标签 html为网页标记语言 <标签名> DTD声名 新版 <!DOCTYPE html> 标题标签 hn <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> n越大，字体越小，自动加粗，换行 color设置字体的颜色 1.HEXColor 六位的十
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 151
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
CSS 多按钮根据半圆弧度排列
前端技术
08-08 337
多个按钮根据弧度，延边均匀排列。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 243
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS基础
最新发布
weixin_45086164的博客
08-09 517
CSS基础
前端（HTML + CSS）学成在线项目（仿）
li3123537691的博客
08-06 554
头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中。头部区域分为：logo + 导航 + 搜索 + 用户四个小块。banner区域分为：左侧导航 + 背景图 + 右侧课程表。HTML（index.html）代码。精品推荐课程区域（版心居中）鼠标悬停 :hover效果。鼠标悬停 :hover效果。鼠标悬停 :hover效果。数据分析师区域（版心居中）编程入门区域（版心居中）
iPhone Web前端开发详解：CSS、JavaScript与资源优化
"iPhone上的Web前端开发" 在iPhone上进行Web前端开发是一项技术性强且需要考虑诸多因素的任务。本文档详细介绍了iOS设备上Web应用的开发要点，包括对iPhone Webapp的理解、CSS、JavaScript以及资源管理等方面。 一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值