03-08 06:17 阅读 123

网页框架搭建和内容布局

三层结构的模拟框

要求：

　　 1.最上面一层需要有一个form表单获取用户名和密码

　　　2.第二层就是浅黑色

　　　3.第三层放一张图片

DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8"> 
        
head>
        <title>模拟框title>
        <style>

        .cover {
        position:fixed;
        top:0px;
                left:0px;
                right:0px;
                bottom:0px;

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

        z-index:999
}


        .model{
        position:fixed;

        top:50%;
        left:45%;
        z-index:1000;
        background-color:white;   
        height:200rpx;
        width:400rpx;
        margin-top:-100px;
        margin-bottom:-200px;
        }
        style>

    <body>

<div class=‘content‘>
            <img src=‘img\zhu.jpg‘/>
        div>

    <div class="cover">div>

    <div class="model">

    <form action=‘‘>
<p>用户:
                    <input name=‘username‘ type=‘text‘/>
                p>
                <p>密码:
                    <input name=‘password‘ type=‘password‘/>
                p>
                <input type=‘submit‘ value=‘注册‘/>
                <input type=‘button‘ value=‘取消‘ id=‘d1‘/>

            form>
        div>
    body>
html>

成果展示

书写简易博客园界面

技巧：

# 1.先写html代码

搭建网页不要急着写先利用div构造页面的大致布局；
在使用div做页面布局的时候，div个数较多为了能够很好的区分；
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)；

# 2.再写css代码

HTML代码


	
        <meta charset="utf-8">         
<title>博课园title>
<link rel="stylesheet" href="mycss.css"/>

head>
    <body>

<div class="blog-left"> <div class="blog-avatar"> <img src="img/ma.jpg"/> div> <div class="blog-title"> <p>我的博客p> div> <div class="blog-desc"> <p>友好的boyp> div> <div class="blog-info"> <p><a href="https://www.baidu.com">百度a>p> <p><a href="https://www.google.com">谷歌a>p> <p><a href="https://v3.bootcss.com/">Bootstrapa>p> div> <div class="blog-link"> <p><a href="https://www.python.org/">Pythona>p> <p><a href="https://www.jetbrains.com/zh-cn/webstorm/">JavaScripta>p> <p><a href="https://golang.google.cn/">Golanga>p> div> div>

<div class="blog-right clearfix"> <div class="article-list"> <div class="article-title"> <span class="title"> 招亲 span> <span class="data"> 2021-8-6 span> div> <div class="article-content"> <div class="left"> <img src="img/zhu.jpg"> div> <div class="right"> <p>小女十八，闭月羞花，盛世美颜，沉鱼落雁，若那位壮士能娶我家千金，老夫感激涕零，必当重重有赏p> div> div> <div class="article-others"> <span>#Pythonspan> <span>#JavaScriptspan> div> div> body> html>

CSS代码

body{
    margin: 0px;
    background-color: rgb(238,238,238);
}

a{
    text-decoration: none;
}

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

.blog-left{
    float: left;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color:rgb(78,78,78);
}

.blog-avatar{
    height: 200px;
    width:200px;
    border:5px solid white;
    border-radius:50%;
    overflow: hidden;
    margin:20px auto;
}

.blog-avatar img{
    width: 100%;
}

.blog-title,.blog-desc {
    color: darkgray;
    font-size:18px;
    text-align: center;
}

.blog-desc{
    margin-bottom:50px
}

.blog-info a,.blog-link a{
    color: darkgrey;
}

.blog-info{
    margin-bottom:50px;
}

.blog-info a:hover, .blog-link a:hover{
    color: white;
}

.blog-info p,.blog-link p {
margin-left:100px;
text-align:center;    
margin:10px auto;     
}

.blog-right{
    float: right;
    height: 2000px;
    width: 80%;
}

.article-list{
    background-color:white;
    margin:20px 40px 20px 20px;
    box-shadow:2px 2px 5px #000;
}

.article-title{
    border-left:10px solid red;
}

.article-title .title{
    font-size:36px;
    margin-left:16px;
}

.article-title .data{
    float:right;
    margin:20px 20px;
}

.article-content{

            padding: 0px;
            height: 160px;
            border-bottom:1px solid black
}

.article-content .left{
    margin: 5px;
            padding: 0px;
            height: 150px;
            width: 150px;
    float:left;
} 

.article-content .left img{
    height: 150px;
    width:150px;
}

.article-content .right{
margin: 5px;
            padding: 0px;
            height: 200px;
            float: left;
}

.article-content .right p{
    font-size:20px;
    text-indent:20px
}

.article-others{
    padding:10px 20px;
}

成果展示

前端框架工具

# 前端的框架有很多 功能也参差不齐

   前端框架

    页面搭建相关

        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>  # 控制占几份

# 响应式布局

.col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)

能够根据浏览器窗口和机器型号的不同自动调节比例

 

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

原文：https://www.cnblogs.com/20wod/p/15115793.html