简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > phpcnui手册,使用Flex布局重写--PHP培训九期线上班
Blogger Information
Blog 33
fans 0
comment 0
visits 19506
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
phpcnui手册,使用Flex布局重写--PHP培训九期线上班
取个名字真难
Original
611 people have browsed it

phpcnui手册,使用Flex布局重写

html代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>phpcn UI 用户参考手册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header><span><h1> phpcn UI</h1> <h1> 用户参考手册 </h1></span></header>
<main>

  <div class="left">
      <div class="left1">
      <span>前端基础</span>
      <a href="1_框架安装.html" target="content">构架安装</a>
      <a href="2_页面结构.html" target="content">页面结构</a>
      <a href="3_常用标签.html" target="content">常用标签</a>
      <a href="4_CSS选择器.html" target="content">css选择器</a>
      <a href="5_CSS样式控制.html" target="content">css样试控制</a>
      <a href="6_CSS盒模型.html" target="content">css盒模型</a>
      <a href="7_CSS浮动与定位.html" target="content">css浮动与定位</a>
      <a href="8_CSS常用布局方式.html" target="content">css常用布局方式</a>
      <span>框架组件</span>
      </div>
      <p><a href="www.php.cn">php中文网</a>©版权所有(2019)</p>


  </div>
    <div class="right">
        <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="100%" frameborder="0"></iframe>
    </div>

</main>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

css样试

实例

*{
    padding: 0;
    margin: 0;
}
a{
   text-decoration: none;
    color: #333;
}
li{
    list-style: none;
}
header{
    display: flex;
    background-color: #d4d4d4;
    height: 57px;
    line-height: 57px;

}
header span{
    display: flex;
    justify-content:flex-start;
    flex: 0.45;
margin-left: 30px;

}
header>span>h1:first-of-type{
    color:coral ;
    text-shadow:2px 2px 1px #333;
    font-weight:bolder;

}
header h1{
    display: flex;
    font-weight:300;
    color: #555;
    vertical-align: inherit;
}
/*main样试*/
main{
    display: flex;
    justify-content:flex-start ;
    height: 100vh;
}
.left p{
display: flex;
flex-flow: row nowrap;
}
.left p a{
    margin: 0;
}

main a:hover{
   color: lightseagreen;
    font-weight: bold;

}
main a{

    margin-top: 5px;
    display: flex;
    margin-left: 60px;


}
main span{
    margin-left: 40px;
}
/*左侧*/
.left{
    display: flex;
    background-color: #eee;
    flex-flow: column nowrap;
    flex: 0.2;
    font-size: 14px;
     justify-content: space-between;
    padding-top: 30px;

}
.left span{
    font-weight: bolder;

}

/*右侧*/
.right {
    display: flex;
    background-color:#FFF ;
    flex: 0.8;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

1573392423(1).jpg

右边的样试表没有导入进来所以就这样显示了

微信图片_20191110214615.png

微信图片_20191110214438.jpg

Correction status：qualified

Teacher's comments：二周的时候, 其实是很短的, 一共不到20小时的课程 , 但是前端入门足够了, 如果你能通过这二周的学习, 觉得学到了新知识, 提升了技能 , 就值了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！