网页制作

书写三层结构的模态框

1.最上面一层需要有一个form表单 获取用户名和密码
2.第二层就是浅黑色
3.第三层放一张图片

<!DOCTYPR html>
<html>
<head>
　　<style>
　　　　.color {
　　　　　　position:fixed;
　　　　　　top:0px;
　　　　　　left:0px;
　　　　　　right:0px;
　　　　　　bottom:0px;
　　　　　　background-color:rgba(127,127,127,0.75);
　　　　　　z-index:999

　　　　　　　　}
　　　　.form {
　　　　　　position:fixed;
　　　　　　top:50%;
　　　　　　left:50%;
　　　　　　z-index:1000;
　　　　　　background-color:white;

　　　　　　　　}

</style>
</head>
　　<body> <div class='photo'>
　　　　　　　　<img src=https://pic.cnblogs.com/avatar/2473958/20210722122805.png></img>
　　　　　　</div>
　　　　　　<div class='color'></div>
　　　　　　<div class='form'>
　　　　　　　　<form action=''>
　　　　　　　　　　<p>用户名<input type='text' name='use'></p>
　　　　　　　　　　<p>密码<input type='passname' name='pass'></p>
　　　　　　　　　　<input type='submit' value='注册'/>
　　　　　　　　　　<input type='button' value='取消' id='d1'/>
　　　　　　　　</form>
　　　　　　</div>
　　</body>
</html>

书写简易博客园界面

"""
搭建网页不要急着写 先利用div构造页面的大致布局
eg:回想常用布局标签div以及小米官网
在使用div做页面布局的时候 由于div个数较多为了能够很好的区分
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)
"""

1.先写html代码，再写css代码

2.最好建个专门的css文档，然后用<link rel='stylesheet' href='文档名'></link>加入html，不然会很乱。

3.写css文档前最好先排好版，如：

/*通用样式*/

/*左边样式*/

/*右边样式*/

3.先把需要事先写的东西写好，如：

去除网页默认边距，加上背景色

body {
margin:0px;

}

去除链接的下划线

a {
text-decoration:none;
}

去除列表的标号

ul {
list-style-type:none;
padding-left:0px;
}

防塌陷用代码

.clearfix:after {
content:'';
display:block;
clear:both;
}

4.class属性要让自己能记住

<!DOCTYPR html>
<html>
    <head>
    <title>纯手工博客园界面</title>
    <link rel='stylesheet' href='111.css'></link>
    </head>
    <body>
    <div class=left>
    <div class='头像'><img src='https://pic.cnblogs.com/avatar/2473958/20210722122805.png'/></div>
    <div class='的博客'><p>雾雨黑白的博客</p></div>
    <div class='简介'><p>由于很懒，所以什么都没有写的简介</p></div>
    <div class='联系方式'>
    <ul>
    <li><a href='#'>联系方式1</a></li>
    <li><a href='#'>联系方式2</a></li>
    <li><a href='#'>联系方式3</a></li>
    </ul>
    </div>
    <div class='编程'>
    <ul>
    <li><a href='#'>#python</a></li>
    <li><a href='#'>#java</a></li>
    <li><a href='#'>#golang</a></li>
    <li><a href='#'>以上都不会</a></li>
    </ul>
    </div>
    </div>
    
    <div class='right'>
    <div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div>
    <div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div><div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div><div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div><div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div><div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div><div class='一组'>
    <div class='第一列'>
    <span class='标题'>很厉害的标题</span>
    <span class='时间'>2021.8.6</span>
    </div>
    <div class='话'><p>很厉害的话</p></div>
    <div class='备注'>很厉害的备注</div>
    </div>
    </div>
    </body>
</html>
/*这是111页面样式代码文件*/
/*页面通用样式*/
body {
    margin:0px;
    background-color:rgb(238,238,238);
}

a {
    text-decoration:none;
}

ul {
    list-style-type:none;
    padding-left:0px;
}

.clearfix:after {
    content:'';
    display:block;
    clear:both;    
}
/*left*/
.left{
    float:left;
    position:fixed;
    width:20%;
    height:100%;
    background-color:rgb(78,78,78);
    top:0px;
    left:0px;
}
.头像{
    width:50%;
    height:200px;
    border:5px solid white;
    border-radius:50%;
    overflow:hidden;
    margin:30px auto;
}
.头像 img{
    width:100%;
}
.的博客{
    color:darkgray;
    font-size:25px;
    text-align:center;
}
.简介{
    color:darkgray;
    font-size:20px;
    text-align:center;
}
.联系方式 a,.编程 a{
    color:darkgray;
    font-size:28px;
}
.联系方式 a:hover{
    color:white;
}
.编程 a:hover{
    color:white;
}
.联系方式 ul,.编程 ul{
    margin:60px auto;
    text-align:center;
}
.联系方式 ul>li,.编程 ul>li{
    margin:10px auto
}
/*right*/
.right{
    float:right;
    height:100%px;
    width:80%;
}
.一组{
    background-color:white;
    margin:20px 40px 20px 20px;
    box-shadow:5px 5px 5px rgb(0,0,0,0.5);
}
.第一列{
    border-left:10px solid red;
}
.第一列 .标题{
    font-size:36px;
    margin-left:16px;
}
.第一列 .时间{
    float:right;
    margin:20px 20px;
}
.话 p{
    font-size:20px;
    text-indent:28px;
}
.话{
    border-bottom:1px solid black; 
}
.备注{
    padding:10px 27px
}

前端框架

# 前端的框架有很多 功能也参差不齐
什么是框架:别人提前帮你写好了大部分功能的工具
　　前端框架
　　　　页面搭建相关
　　　　　　Bootstrap elementui layui
　　　　功能应用相关
　　　　　　react Vue
（一般不用最新版本）
# Bootstrap框架
　　能够让你cv快速搭建页面

# 压缩文件
　　bootstrap.css # 未压缩的
　　bootstrap.min.css # 压缩之后的

# 页面布局
　　<div class='container'> # 左右两边是否有留白
　　　　<div class='row'> # 一行均分12份
　　　　　　<div class='col-md-6 c1'></div> # 控制占几份

# 响应式布局
　　能够根据浏览器窗口和机器型号的不同自动调节比例

"""使用bootstrap的情况下给标签调样式 一般都是修改标签的calss值即可"""

 

posted @ 2021-08-06 15:44  雾雨黑白  阅读(51)  评论(0)  编辑  收藏  举报