各位老铁们，大家好，今天由我来为大家分享css网站布局实录源码分享，以及如何使用css进行网页布局,举例说明的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
该案例是从最终效果到实现的过程
一，分析页面布局
首先页面的最左侧是一个广告，采用固定定位；然后最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。
四个部分：header，nav，main，footer，
再加上一个广告部分，五个部分
二，做整体布局
1.创建一个站点文件夹，再加上子文件夹
2.先初步输入代码，4部分4<div>,广告后面加
<!DOCTYPEhtml>\n<htmllang=&34;>\n\n<head>\n<metacharset=&34;>\n<title>Document</title>\n\t<linkrel=&34;href=&34;type=&34;/>\n</head>\n\n<body>\n<divid=&34;>\n\t\t<divid=&34;></div>\n\t\t<divid=&34;></div>\n\t\t<divid=&34;>\n\t\t\t<divid=&34;></div>\n\t\t\t<divid=&34;></div>\n\t\t</div>\n\t\t<divid=&34;></div>\n\t</div>\n</body>\n\n</html>\n“`\n再初步定义一下css样式\n“`style.css\n/*默认样式的清零*/\n*{\n\tmargin:0px;\n\tpadding:0;\n}\n\nbody{\n\tfont-size:16px;\n\tcolor:container{\n\tmargin:0auto;/*水平居中*/\n\twidth:900px;\t\n}\n\nnav{\n\theight:30px;\t\n\tmargin:5px;\n\tbackground-color:fff;\n\tletter-spacing:2px;\ntext-align:center;\n}\n\naside{\n\tfloat:left;\n\twidth:300px;\n\theight:500px;\n\tbackground-color:content{\n\tfloat:right;\n\twidth:595px;\n\theight:2050px;\n\tmargin-bottom:5px;\n\tbackground-color:footer{\n\theight:60px;\n\tline-height:60px;\n\tbackground-color:34;en&34;UTF-8&34;stylesheet&34;css/style.css&34;container&34;header&34;images/banner.jpg&34;icon-list&34;images/1.bmp&34;images/2.bmp&34;images/3.bmp&34;images/4.bmp&34;nav&34;34;>咖啡MENU</a>|\n\t\t\t<ahref=&34;>咖啡COOK</a>|\n\t\t\t<ahref=&&34;34;>咖啡NEWS</a>|\n\t\t\t<ahref=&&34;main&34;aside&34;row&34;row&34;row&34;imglist&34;polaroidrotate_left&34;images/Mocha.jpg&34;polaroidrotate_right&34;images/Latte.jpg&34;polaroidrotate_left&34;images/Espresso.jpg&34;polaroidrotate_right&34;images/Cappuccino.jpg&34;content&34;subcont&34;images/Latte.jpg&34;&34;subtext&34;subcont&34;images/Cappuccino.jpg&34;&34;subtext&34;subcont&34;images/Mocha.jpg&34;&34;subtext&34;subcont&34;images/Espresso.jpg&34;&34;subtext&34;footer&34;l-fix&34;images/Latte.jpg&34;微软雅黑&673929;\n}\nheader{\n\theight:220px;/*必须添加，否则header下面有10px而不是5px空白*/\n\tmargin-bottom:5px;\n\tposition:relative;/*父层定位*/\n}\n\nicon-listimg{\n\tmargin-left:5px;\n}\n09c;\t\t\n\tfont:18px/30px微软雅黑;\n\tcolor:fff;\n\ttext-decoration:none;\n}\na:visited{\n\tcolor:fff;\n\ttext-decoration:none;\n}\naside{\n\tfloat:left;\n\twidth:300px;\n\tbackground:000;\n}\nimglist{\n\twidth:130px;\n\tmargin:0auto;\t\t\n}\n.polaroid\n{\n\twidth:85px;\t\t\n\tpadding:10px;\n\tbackground-color:BFBFBF;\n\tbox-shadow:2px2px4pximglistimg{\n\theight:95px;\n\twidth:85px;\n\tmargin:0auto;\n\tfont-size:0;\n}\ncontent{\n\tfloat:right;\n\twidth:595px;\n\tmargin-bottom:5px;\n\tbackground:000;\n}\n.subcont.subtext{\n\twidth:60%;\n\tfloat:left;\n\tmargin:5px;\n}\n.subconth2{\n\tmargin:5px;\n}\n.subcontp{\t\n\tfont:16px/2em微软雅黑;\n}\n6cf;\n\tclear:both;/*新加代码*/\n\tmargin-top:5px;\n\ttext-align:center;\n}\n\nl-fiximg{\nheight:100px;\n\twidth:100px;\n}
最终效果
关于css网站布局实录源码分享和如何使用css进行网页布局,举例说明的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。