极客学院的前端课程（十二）

最新推荐文章于 2024-02-05 18:22:06 发布
最新推荐文章于 2024-02-05 18:22:06 发布
阅读量212 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/garrulousabyss/article/details/80979011
版权

3.4.5 CSS盒子模型——外边距合并


第一个文件style.css

/*
body{
    margin: 0px;
}

.mg{
    background-color: blue;
    width: 100px;
    height: 100px;
    margin-top: 100px;
}
*/
.body{
    margin: 0;
}

.container{
    margin: 10px;
}

.bd{
    border-style: dotted;
}

.pd{
    padding: 100px;
}

.content{
    background-color: blue;
}

.container1{
    margin: 20px;
}

.bd1{
    border-style: dotted;
}

.pd1{
    padding: 100px;
}

.content1{
    background-color: blue;
}

第二个文件 60.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!--div class="mg">外边距</div-->

    <div class="container">
        <div class="bd">
            <div class="pd">
                <div class="content">Hello</div>
            </div>
        </div>
    </div>

    <div class="container1">
        <div class="bd1">
            <div class="pd1">
                <div class="content1">Hello</div>
            </div>
        </div>
    </div>
</body>
</html>

3.4.6 CSS盒子模型——盒子模型应用

第一个文件style.css

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

.top{
    width: 100%;
    height: 50px;
    background-color: black;
}

.top_content{
    width:75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}

.body{
    margin:20px auto;
    width: 75%;
    height: 1500px;
    background-color: blanchedalmond;
}

.body_img{
    width: 100%; /*这里是整体的75% * 100% =75%*/
    height: 400px;
    background-color: darkorange;
}

.body_content{
    width:100%;
    height:1100px;
    background-color: blueviolet;
}

.body_no{
    width: 100%;
    height: 50px;
    background-color: aqua;
}

.footing{
    width: 75%;
    height: 400px;
    background-color: indigo;
    margin: 0px auto;
}

.footing_content{
    width: 100%;
    height:350px;
    background-color: darkgreen;
}

.footing_menu{
    width:100%;
    height: 50px;
    background-color: darkorange;
}

第二个文件 62.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型的应用</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_menu"></div>
    </div>
</body>
</html>

3.5.1 CSS常用操作——对齐



第一个文件 style.css

*{
    margin: 0px;
}

.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    margin: 0px auto;/*前一个属性代表上下，，后一个属性代表左右*/
}

第二个文件 63.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="div">

    </div>
</body>
</html>

3.5.2 CSS常用操作——分类



第一个文件 style.css

li{
    display: inline;
    visibility: hidden;
}


.p1{
    width:400px;
    line-height: normal;
    max-width: 200px;
}

.p2{
    width:400px;
    line-height: 200%;
}

.p3{
    width:400px;
    line-height: 50%;
}

p{
    cursor:cell;
}

第二个文件 64.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul>
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
    </ul>

    <p class="p1">This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
    </p>
    <p class="p2">This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
    </p>
    <p class="p3">This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
        This is my web page. This is my web page. This is my web page.
    </p>

    <p>hello</p>
</body>
</html>

3.5.3 CSS常用操作——导航栏


第一个文件style.css

ul{
    list-style-type: none;
    margin:0px;
    padding: 0px;
    background-color: burlywood;
    width: 400px;
    text-align:center;
}

a:link , a:visited{
    font-weight: bold;
    text-decoration: none;
    background-color: burlywood;
    color: aliceblue;
    width: 100px;
    text-align: center;
}

a:active, a:hover{
    background-color: crimson;
}

li{
    display: inline;
    padding: 3px;
    padding-left: 5px;
    padding-right:5px;
}

第二个文件 65.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
    </ul>
</body>
</html>

3.5.4 CSS常用操作——图片

第一个文件style.css

body{
    margin:10px auto;
    width:50%;
    height:auto;
    background-color: burlywood;
}

.image{
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin:5px;
}

img{
    margin: 5px;
    opacity: 1;
    cursor: cell;
}

.text{
    font-size: 12px;
    margin-bottom: 5px;
}

a:hover{
    background-color: crimson;
}

第二个文件 66. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg.jpg" alt="风景" width="300px" height="300px">
        </a>
        <div class="text"> 8月份的维多利亚</div>
    </div>

</div>
</body>
</html>

3.6.1 选择器——选择器1

第一个文件style.css

h1,h2{
    font-size: 45px;
}

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

a.div{
    color: purple;
}

.p1{
    color:blue;
}

.p2{
    font-size:30px;
}

.p3{
    font-style:italic;
}

第二个文件 67. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Hello world!</p>
    <h1>标题1</h1>
    <h2>标题2</h2>
    Hello~~

    <div class="div">
        Hello Jikexueyuan
    </div>
    <a class="div">jikexueyuan</a>

    <p class="p1">This is my web page</p>
    <p class="p2">THis is my web page</p>
    <p class="p1 p2">THIs is my web page</p> <!--多类选择器-->
</body>
</html>


garrulousabyss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端实战｜React18极客园——登陆模块（token持久化、路由拦截、mobx、封装axios）
Coding and studying
09-05 3349
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
前端实战｜React18极客园——编辑文章模块（文案适配、回显数据）
Coding and studying
10-19 671
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。
前端项目1
02-18
前端项目1
React 项目 黑马极客园
打工人
01-29 1633
React 项目 黑马极客园
极客园pc项目二 css module
qq_45619095的博客
04-26 181
1.css文件名改为name.module.css 2.通过styles对象中的样式名来设置样式 <div className={styles.样式名}></> 3.注意点 (1).类名最好使用驼峰命名法 .tabBar{} styles.tabBar (2).没有使用驼峰命名法，对于不合法的命名，需要使用[]语法 .tab-bar{} styles['tab-bar] (3).如果是全局的类名，应该使用:global(.类名)的方式，不然会把全局类名给修改掉 :global(
极客学院SKU课程表
10-05
### 极客学院SKU课程表相关知识点 #### 一、选题概述 ##### 选题名称 - **名称**：Python高级技巧 ##### 选题概述 - **职业方向**：本课程适用于Web前端开发、Android开发、Python开发、微信小程序开发及PHP开发等...
极客学院视频采集工具
09-21
从标签“极客学院”我们可以了解到，这个工具主要服务于极客学院的用户，极客学院是一个知名的在线教育平台，提供丰富的编程和技术课程，涵盖了各种编程语言、操作系统、前端开发、后端开发、人工智能等领域。...
极客学院微信小程序源码（含截图）.rar
04-09
极客学院是一个知名的在线教育平台，专注于提供IT技术领域的课程，包括前端开发、后端开发、移动开发等。因此，这份源码很可能是极客学院教学课程的一部分，旨在帮助学员实践微信小程序的开发，提升他们的编程能力。...
FrontApplication:前端开发 极客学院 笔记
04-30
51课程 20小时20分 走进前端工程师的世界 1.走进前端工程师的世界 HTML5 1.HTML 5 与HTML 4 的区别 2.HTML5 新增的主体结构元素 3.HTML5 新增的的非主体结构元素 4.HTML5 表单新增元素与属性 5.HTML5 表单新增元素与...
微信小程序源码 专业IT技能学习平台 - 极客学院App下载
最新发布
05-16
极客学院App是一个专为IT专业人士和爱好者设计的专业在线学习平台。该应用提供了一系列高质量的编程课程，包括但不限于Web开发、移动应用开发、人工智能、数据科学和网络安全等领域。极客学院App的特点包括： 丰富...
zookeeper的极客学院的视频资料
04-10
里面是极客学院的zookeeper的视频资料，讲的还是可以的 ，适合初学者了解和学习
23个设计模式之一的命令模式-极客学院-课件源码
03-14
23个设计模式之一的命令模式，极客学院PPT源码及课件，命令模式的示例
Android教程全套
07-14
兄die，下载不亏！！！ 资源包含： 1、Android SDK 中文开发文档.pdf 2、Android 开发环境搭建步骤详细图解.pdf 3、Android用户手册.pdf 4、Android编程入门教程.pdf 5、Android开发从入门到精通.doc 6、Android开发手册——API函数详解.pdf 7、Android驱动开发入门及手机案例开发分析教程.pdf 8、Android系统移植技术详解.doc 9、Android新手开发教程.pdf 10、Android应用程序开发36技.pdf 11、linux Android基础知识总结.pdf 12、Linux内核阅读心得体会.pdf 13、深入浅出Android——Android开发经典教材.pdf
从0开始手把手教你做极客园项目（二）——首页功能实现
Bin_niB的博客
02-03 2090
上一篇文章中（从0开始手把手教你做极客园项目（一）——登录功能实现）详细讲解了登录功能，在登录跳转后就是首页，本文详细讲解跳转到首页的功能实现本次实现了首页的基本功能，例如菜单跳转，二级路由，高亮显示以及图表数据显示（这里的图表数据有需要的话可以跟后端获取），再进行了优化例如token失效的情况，剩下的功能和优化会更新在后续，
极客园pc项目总结一 登录功能
qq_45619095的博客
04-26 790
极客园pc项目总结一 登录功能
从0开始手把手教你做极客园项目（一）——登录功能实现
Bin_niB的博客
02-02 1022
react+typescript+redux+antd实现的一个项目，本文接下来会详细讲解每一步，包括核心思想以及实现流程，登录界面包括的逻辑功能很多，包括封装函数，拦截器，redux管理状态和localstorage本地缓存存储token,以及高阶组件和重定向
极客学院的前端课程（一）
garrulousabyss的博客
06-26 2031
该套系列依据视频： https://www.bilibili.com/video/av102988431.1.1 走进前端工程师的世界淘宝主页会根据不同的终端，比如iPhone5， iPad3等等进行页面显示的自动适配。。。HTML5 WebGL可以进行3D的显示2.1.1 HTML5 开发前的准备2.1.2 开发前的准备——快捷键...
从0开始手把手教你做极客园项目（四）——文章列表功能实现
Bin_niB的博客
02-05 889
本文详细讲解了文章列表功能的实现，完整项目可参考github，前面几篇文章实现了其他功能也可以参考一下
前端实战｜React18极客园——项目打包与优化
Coding and studying
10-19 1639
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。
SQLite数据库入门教程 - 极客学院版
"sqlite教材（极客学院）版，SQLite中文教程，适合初学者的数据库学习资料" SQLite是一种轻量级的数据库管理系统，它不需要独立的服务器进程，而是作为应用程序的一部分运行，因此被称为自给自足的数据库引擎。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值