Blogger Information
Blog 20
fans 1
comment 2
visits 16775
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双飞翼布局完成一个网站的小网页2019年9月7日4点
月迎下弦的博客
Original
779 people have browsed it

整体页面

未标题-2.jpg


头部导航代码和css代码

1.gif

TIM截图20190907041216.png

TIM截图20190907041242.png

TIM截图20190907041249.png

中间主要内容分为三部分,左中右;

左侧效果代码和头部导航类似 (略):

2.gif

中间部分使用table表格写的非常easy增加要给鼠标事件:

未标题-5.gif

TIM截图20190907044626.png

TIM截图20190907044641.png

右侧部分主要是增加了一个滚动条增加了图片的展示(图片来源于百度图片,不做商用,仅作为技术交流):

3.gif

TIM截图20190907045041.png

TIM截图20190907045123.jpg

尾部页脚和头部导航类似(略)

总结:

     貌似听课总是感觉到很容易,可等到开始做的时候才发现问题太多了,想着的时候很简单,导航条就是li清除样式,a标签float:left,再去除一些链接样式,可敲代码的时候才发现,这里忘记设置margin 那里丢下padding了,很难一次性的把一个过程完成的写下来,应该是不熟练导致的,以后每天都写一个简单页面,加强记忆和思维, 并在最简单的样式上逐渐的增加功能。

      网页的尾部和头部导航类似,会了导航也就会了页尾了,目前主体部分可以使用四种做法1,box-sizing(圣杯布局)2.宽度分离(双飞翼布局)3,绝对定位(以父级做参照位置)4,清浮动(在父级清浮动来实现)四种做法,圣杯最简单,定位和清浮动会随着页面的宽度改变,改变位置,双飞翼属于正宗流派。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <textarea name="zongjie" id="zongjie" cols="50" rows="20">开始写总结

      貌似听课总是感觉到很容易,可等到开始做的时候才发现问题太多了,想着的时候很简单,导航条就是li清除样式,a标签float:left,再去除一些链接样式,可敲代码的时候才发现,这里忘记设置margin 那里丢下padding了,很难一次性的把一个过程完成的写下来,应该是不熟练导致的,以后每天都写一个简单页面,加强记忆和思维, 并在最简单的样式上逐渐的增加功能。
      网页的尾部和头部导航类似,会了导航也就会了页尾了,目前主体部分可以使用四种做法1,box-sizing(圣杯布局)2.宽度分离(双飞翼布局)3,绝对定位(以父级做参照位置)4,清浮动(在父级清浮动来实现)四种做法,圣杯最简单,定位和清浮动会随着页面的宽度改变,改变位置,双飞翼属于正宗流派。</textarea>
</body>

</html>

运行实例 »

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

Correction status:qualified

Teacher's comments:不仅是编程, 任何事情都是看着容易动手难... 直播的时候, 看老师写起来很轻松,那是因为老师的这些代码不知写了多少遍, 什么时候你把这些写到吐就明白了
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