python之路41 前端页面尝试丑出新高度

边框

p {/* 左边 */

    font-size: 48px;

    border-left-width: 5px;

    border-left-style: dotted;  /*点点边框*/

    border-left-color: #0000ff;

        }

 p {/* 顶部 */

     font-size: 48px;

     border-top-width: 10px;

     border-top-style: solid;  /* 框框边框 */

     border-top-color: green;

        }

右侧:right   底部:bottom

简写:  border-bottom:coral 10px solid;

       border-left:coral 10px dotted;

       border-right:dashed 10px red; /*杠杠边框*/

再次简写: border:10px dashed orange; /*边框一致*/

ps:后面三个参数顺序无所谓

画圆操作

.c1 { /*保持长宽一致*/

    width: 400px;

    height: 400px;

    border:10px solid blue;

    border-radius: 100%;

        }

display

"""行内标签是无法设置长宽 只有块儿级可以设置"""

display:none 彻彻底底的隐藏标签(页面上不会显示也不会保留标签的位置)

visibility: hidden  隐藏的不彻底

盒子模型

我们可以将标签看成是一个盒子(快递盒)

1.快递包里面的实际物体    content(内容)

2.物体与内部盒子墙的距离  padding(内边距、内填充)

3.快递盒的厚度           border(边框)

4.快递盒之间的距离       margin(外边距)

padding: 20px; /*上下左右*/

padding: 20px 40px;  /* 上下   左右*/

padding: 10px 20px 30px;   /*上  左右  下*/

padding: 10px 20px 30px 40px; /*上 右 下 左*/

margin与padding用法一致

针对标签的嵌套 水平方向可以居中

margin: 0 auto;

浮动

浮动就是用来做页面布局的

浮动的现象

   float:left\right

浮动带来的影响

   浮动的元素是脱离正常文档流的 会造成父标签塌陷

如何解决浮动的影响

  clear

解决浮动带来的影响终极方法

先提前写好样式类

 .clearfix:after {

     content: '';

     display: block;

     clear: both;

    }

<div class="c1 clreafix" >

    <div class="c2"></div>

    <div class="c3"></div>

    <div class="c4"></div>

</div>

谁塌陷了 就给谁添加clearfix样式类就可以了

ps:浏览器会优先展示文本内容(如果被挡住)

溢出

overflow: hidden; /*多的清楚*/

overflow: auto;   /*收缩滚动查看*/

overflow: scroll;   /*上下左右滚动查看*/

圆形头像:

<style>

        body{

            background-color: darkgrey;

        }

        div{

            height: 200px;

            width: 200px;

            border: 5px solid yellow;

            border-radius: 100%;

            overflow: hidden;

        }

        div img{

            max-width: 100%;

        }

</style>

<body>

    <div>

        <img src="https://img2.baidu.com/it/u=1479070112,180917387&fm=253&fmt=auto&app=138&f=JPEG?w=313&h=500" alt="">

    </div>

</body>

定位

标签在默认情况下都是无法通过定位的参数来移动针对定位有四种状态

1.static静态(标签默认的状态 无法定位移动)

2.relative相对定位(基于标签原来的位置)

3.absolute绝对定位(基于某个定位过的父标签做定位)

4.fixed固定定位(基于浏览器窗口固定不动)

div{

    background-color: red;

    width: 200px;

    height: 200px;

    left: 100px;

    top: 200px;

    position: relative; /* 改变相对位置*/

        }

.c1 {

            background-color: red;

            height: 100px;

            width: 100px;

            position: relative;

        }

.c2 {

    background-color: greenyellow;

    height: 200px;

    width: 200px;

    position: absolute;

    top:100px;

    left:100px;

}

<!--<div></div>-->

<div class="c1">购物车

    <div class="c2">很穷 购物车空空如也!!!!</div>

</div>

模拟色块 固定定位:

.c1 {

    border: 5px solid black;

    height: 200px;

    width: 200px;

    position: fixed;

    right: 100px;

    bottom:100px;

        }

<div style="height: 1000px;background-color: red"></div>

<div style="height: 1000px;background-color: yellow"></div>

<div style="height: 1000px;background-color: green"></div>

<div class="c1"> 雨后彩虹 唧唧咋咋</div>

z-index

弹窗登录:

<style>

        body{

            margin:0;

        }

        .cover{

            background-color: rgba(127,127,127,0.5);

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom:0;

            z-index: 100;

        }

        .modal{

            height: 200px;

            width: 400px;

            background-color: white;

            z-index: 101;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -200px;

            margin-top: -100px;

        }

    </style>

<div>我在最下面</div>

<div class="cover"></div>

<div class="modal">

    <form action="">

        <p>

            username:

            <input type="text">

        </p>

        <p>

            password:

            <input type="text">

        </p>

    </form>

</div>

附赠一个调透明度的:opacity

<div style="opacity: 0.5;">嘿嘿嘿</div>

<div style="background-color: rgba(0,0,0,0.5);">哈哈哈哈

</div>

博客页面搭建

1.分享页面结构

   利用布局标签div和span搭建架子(和python一样)

2.先编写网页骨架

  HTML

3.再编写CSS

4.最后编写JS

自己尝试搭建了个小页面：直接丑出新高度字体太大了可以修改一下

HTML块代码

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="blog.css">

</head>

<body>

    <div class="blog-left">

<!--        头像区开始-->

        <div class="blog-avatar">

        <img src="https://img1.baidu.com/it/u=2389183760,3266356431&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=499" alt="">

        </div>

<!--        头像区结束-->

        <div class="blog-title">

            <span>西安美女</span>

        </div>

        <div class="blog-info">

            <span>月刊越困月刊越困</span>

        </div>

        <div class="blog-link">

            <ul>

                <li><a href="">联系</a></li>

                <li><a href="">微信</a></li>

                <li><a href="">博客</a></li>

            </ul>

        </div>

        <div class="blog-course">

            <ul>

                <li><a href="">#擒拿手</a></li>

                <li><a href="">#pppppp</a></li>

                <li><a href="">#乱斗气体原来</a></li>

            </ul>

        </div>

    </div>

    <div class="blog-right">

        <div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div><div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div><div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div><div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div><div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div><div class="article-list">

            <div class="article-title">

                <span class="title">论战斗之道</span>

                <span class="date">2022/12/03</span>

            </div>

            <div class="article-desc">

                <span>晚睡早起练功 飞禽晚上 废寝忘食</span>

            </div>

            <div class="article-end">

                <span> %劈里啪啦</span>

                <span>吭哧吭哧</span>

            </div>

        </div>

    </div>

</body>

引入CSS块代码

/* 前端页面样式表*/

/* 页面通用样式*/

body{

    margin:0;

    background-color: #eee;

}

a{

    text-decoration: none;

}

ul{

    list-style-type:none ;

    padding-left: 0;

}

/* 首页左侧样式*/

.blog-left{

    float:left;

    width: 20%;

    height: 100%;

    background-color: #4e4e4e;

    position:fixed;

    left:0;

    top:0;

}

.blog-avatar{

    border: 3px solid  yellow;

    height: 100px;

    width: 100px;

    border-radius: 100%;

    margin:10px auto;

    overflow: hidden;

}

.blog-avatar img {

    max-width: 100%;

}

.blog-title, .blog-info{

    color: darkgray;

    text-align: center;

    margin: 10px auto;

}

.blog-link, .blog-course{

    text-align: center;

    margin: 20px auto;

}

.blog-link,ul>li .blog-course ul>li{

    padding: 20px;

}

.blog-link a, .blog-course a{

    color:darkgray;

    font-size:16px;

}

.blog-link a:hover, .blog-course a:hover{

    color:white;

}

/* 首页右侧样式*/

.blog-right{

    float:right;

    width: 80%;

    height: 100%;

}

.article-list{

    background-color: white;

    margin: 20px 50px 20px 20px;

    box-shadow: 20px 20px 20px  rgba(0,0,0,0.7);

}

.article-list .article-title .title{

    font-size: 36px;

    border-left: 10px solid red;

    padding-left: 10px;

}

.article-list .article-title .date{

    font-size: 10px;

    font-weight: bolder;

    float: right;

    margin: 20px 20px;

}

.article-desc {

    font-size: 16px;

    font-weight: lighter;

    text-indent: 10px;

    border-bottom: 1px solid black;

}

.article-end {

    padding: 10px 10px 10px 10px;

}

做出的效果是这样的：

python之路41 前端页面尝试丑出新高度的更多相关文章

【python之路41】web框架
一.web框架介绍一共有两种web框架 1.既包含socket又能逻辑处理 tornado框架 2.只能处理逻辑 Django bottle flask 二.web框架的本质众所周知,对于所有的 ...
前端页面div float 后高度 height 自适应的问题
最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...
Python之路-(js正则表达式、前端页面的模板套用、Django基础）
js正则表达式前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
Python Django CMDB项目实战之-3创建form表单，并在前端页面上展示
基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...
Python Django CMDB项目实战之-2创建APP、建模（models.py）、数据库同步、高级URL、前端页面展示数据库中数据
基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
自学Python之路-Python并发编程+数据库+前端
自学Python之路-Python并发编程+数据库+前端自学Python之路[第一回]:1.11.2 1.3
Python菜鸟之路：前端HTML基础
前面的章节中,Python的基本知识已经差不多介绍完了.本节介绍HTML相关的知识.需要着重声明的是,前端知识是非常非常重要的知识,以我实际项目经验来看,一个项目的瓶颈在设计和前端.设计就先不说了,前 ...
Python之路,Day17 - 分分钟做个BBS论坛
Python之路,Day17 - 分分钟做个BBS论坛本节内容: 项目:开发一个简单的BBS论坛需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同 ...
python之路-进程
博客园首页新随笔联系管理订阅随笔- 31 文章- 72 评论- 115 python之路——进程阅读目录理论知识操作系统背景知识什么是进程进程调度进程的并发与并行 ...
Python之路【第十九篇】：爬虫
Python之路[第十九篇]:爬虫网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

随机推荐

后端框架的学习----mybatis框架（7、使用注解开发）
7.使用注解开发 1.注解在接口上实现 /** * 查询用户 */ @Select("select * from user") public List<User> ge ...
jstl的使用转发和重定向（做项目遇到的一些问题总结）
文章目录 1.jstl的使用 2.转发和重定向 3.shiro 4.spring是什么? 5.对AOP的理解 6.标签通常和标签一起使用 7.springmvc中的form表单 7.1 form标签 ...
VBA_BASIC
字符串相关判断单元格是否包含特定字符串,以"P"为例. if cells(1,1) Like "*P*" Then cells(1,2) = "ha ...
Java安全之Mojarra JSF反序列化
Java安全之Mojarra JSF反序列化 About JSF JavaServer Faces,新一代的Java Web应用技术标准,吸收了很多Java Servlet以及其他的Web应用框架的特 ...
.Net SemaphoreSlim
看Elsa-core源代码中看到的,Elsa-core中所有保存数据的方法似乎使用同一个Save方法.如下图: 那么为什么要使用这玩意,我还是头一次见这玩意???? 好吧,我承认我自己菜.我自个儿也该 ...
Java反应式编程（1）
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把Java函数式编程的由来和最主要的核心知识点讲完了.包括比较难懂的Lambda表达式是怎么演变而来的也全部都撸了一遍.Lambda表达式这 ...
cowsay和ansible
简介 cowsay是一款有趣的ascii图案输出工具,通过它可以方便的输出一头说话的牛牛(马?): # cowsay hello frankming _________________ < he ...
【云原生 · Kubernetes】配置 Rancher docker 云平台
个人名片: 因为云计算成为了监控工程师‍ 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 1.1 Rancher 概述 Rancher 是一个开源的企业级容器管理平台.通过 Ranc ...
【Java并发007】原理层面：ReentrantLock中lock()、unlock()全解析
一.前言 Java线程同步两种方式,synchronized关键字和Lock锁机制,其中,AQS队列就是Lock锁实现公平加锁的底层支持. 二.AQS源码对于lock.lock()的实现 2.1 AQ ...
MyBatis详解（一）
MyBatis简单介绍 [1]MyBatis是一个持久层的ORM框架[Object Relational Mapping,对象关系映射],使用简单,学习成本较低.可以执行自己手写的SQL语句,比较灵活 ...

python之路41 前端页面尝试 丑出新高度

边框

display

盒子模型

浮动

溢出

定位

z-index

博客页面搭建

python之路41 前端页面尝试 丑出新高度的更多相关文章

随机推荐

热门专题

python之路41 前端页面尝试丑出新高度

python之路41 前端页面尝试丑出新高度的更多相关文章