简单的html+css页面制作_html/css_WEB-ITnose
今天用html+css做一个最简单的页面。效果图如下：
说明：这里的韩文用中文随便代替。
1、拿到效果图首先分析页面布局
该图是竖排结构，分5个大的DIV：
我做的页面宽度是1024px的，在5个DIV外面加一个大框给一个名为all的class。设定宽为1024px，并居中。
一般页面都是按顺序做，这个看个人习惯。由于只是一个页面，我的css就和HTML写在一个页面里面。
2、先写第一个div，给他一个class名称为top.
css样式如下：
效果如下：
这样第一个div就做好了。
3、下面做menu和logo
css如下：
效果图：
4、做menu的子菜单
css如下：
一般二级菜单的可以用js做，我这边没用js，直接用的css,给一级菜单和二级菜单定位，用样式（图中矩形框中的css）控制二级菜单的隐藏显示。这样写的缺点就是不兼容IE6。其他的主流浏览器像谷歌，火狐和IE高版本都可以兼容。
5、banner最好做了，直接放图片或设置背景都可以。此处省略
6、分析主体内容，第4个DIV
该DIV中分上下两层，第一层显示新闻列表，关于我们和产品中心，第二层显示logo+版权说明和一个下拉框
因为第一层的内容是并排显示，所以这三个DIV设置像左浮动。
按从左向右的顺序，先做新闻板块
样式：
7、图中关于我们又分左右结构，直接让图片左浮，左右结构就出来了。这种写法暂时还没遇到什么问题。
产品中心应该是用js做的百叶窗效果，这里暂时只是样式。效果会后续补上。在产品中心和底部logo之间加底部的logo和其他div就会自动下去了。
下面附上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>html+css基本页面</title><style type="text/css">*{ margin:0; padding:0; font-size:12px; color:#464646;}a{ text-decoration:none;}ul li{ list-style:none;}.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}/*.clear样式的作用是清除浮动*/.all{ width:1024px; margin:0 auto;}.top{ background:#404040; display:table; width:100%;}.top ul{ float:right; margin-right:30px;}.top ul li{ float: left; margin:0px 10px;}.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}.header{ background:url(images/menu_bg.jpg) repeat-x;}.logo img{ display:block; margin:0px auto; padding-top:20px;}.menu{ display:table; margin:0 auto;}.menu ul li{ float:left; position:relative;}.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li:hover ul{ display:table;}.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}.menu ul li ul li{ float:left;}.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}.menu ul li ul li a:hover{ background:none; color:#246477;}.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}.news{ float:left; width:220px; margin:0px 20px;}.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}.news ul li{ line-height:22px;}.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;} .about{ width:305px; display:table; margin:0px 20px; float:left;}.about img{ float:left; margin:20px;}.about img.view{ margin:5px 0px 0px 0px;}.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px; }.about span{ line-height:20px; display:block;}.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}.pro ul{ float:left;}.pro ul.pro_ulview{ width:254px;}.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}.pro ul img.view{ margin-top:40px; }.pro ul img{ float:none; display:block;}.pro ul strong{ display:table; line-height:30px; margin-left:20px;}.pro ul span.view{ width:140px; display:block; margin-left:20px;}.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}.footer_logo{ float:left; margin:20px;}.footer_menu{ float:left; margin:5px 0px 0px 70px;}.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}.footer_menu ul.bq{ margin-left:38px;}.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}.select{ float:right; margin-top:20px;}</style></head><body><div class="all"> <div class="top"> <ul> <li><a href="#" class="a_hover">头部示例1</a></li> <li><a href="#">头部示例2</a></li> <li><a href="#">头部示例3</a></li> <li><a href="#">头部示例4</a></li> </ul> </div> <div class="clear"></div> <div class="header"> <div class="logo"> <img src="/static/imghw/default1.png" data-src="images/logo.png" class="lazy" alt="logo" /> </div> <div class="menu"> <ul> <li class="li_line"></li> <li> <a href="#" class="menua_hover">菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单3</a></li> <li class="li_line"></li> <li><a href="#">菜单4</a></li> <li class="li_line"></li> <li><a href="#">菜单5</a></li> <li class="li_line"></li> <li><a href="#">菜单6</a></li> <li class="li_line"></li> </ul> </div> </div> <div class="clear"></div> <div> <img src="/static/imghw/default1.png" data-src="images/banner.jpg" class="lazy" alt="banner" /> </div> <div class="clear"></div> <div class="main"> <div class="news"> <dl> <dd>NEWS</dd> <dt>more</dt> </dl> <div class="clear"></div> <ul> <li><a href="#">新闻示例1新闻示例1新闻示例1新闻示例1</a></li> <li><a href="#">新闻示例2新闻示例2新闻示例2新闻示例</a></li> <li><a href="#">新闻示例3新闻示例3新闻示例3新闻示例</a></li> <li><a href="#">新闻示例4新闻示例4新闻示例4新闻示例</a></li> </ul> </div> <div class="about"> <img src="/static/imghw/default1.png" data-src="images/about.png" class="lazy" alt="about" /> <h3 id="ABOUT">ABOUT</h3> <span>关于我们关于我们关于我们关于我们关于我们关于我们</span> <a href="#"><img class="view lazy" src="/static/imghw/default1.png" data-src="images/about_view.png" alt="view"/></a> </div> <div class="pro"> <ul class="pro_ulview"> <li> <strong>产品<span>案例1</span></strong> <span class="view">产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介</span> <a href="#" class="more"><img src="/static/imghw/default1.png" data-src="images/about_view.png" class="lazy" alt="view"/></a> </li> <img class="view lazy" src="/static/imghw/default1.png" data-src="images/pro_img.png" alt="pro"/> </ul> <ul> <li></li> </ul> <ul> <li></li> </ul> </div> <div class="clear"></div> <div class="footer_logo"><img src="/static/imghw/default1.png" data-src="images/footer_logo.png" class="lazy" alt="footer_logo" /></div> <div class="footer_menu"> <ul> <li><a href="#">首页</a></li> <li class="fli_line"></li> <li><a href="#">关于我们</a></li> <li class="fli_line"></li> <li><a href="#">产品中心</a></li> </ul> <div class="clear"></div> <ul class="bq"><span>版权所有@某某网站</span><span>联系电话:01234567890</span></ul> </div> <div class="select"><img src="/static/imghw/default1.png" data-src="images/select.jpg" class="lazy" alt="select" /></div> </div> </div></body></html>至于图片，用的到的就从效果图上切下来就ok了。
第一次总结这样的东西，不足之处还请见谅。希望可以和大家一起交流，一起进步。
页面一般分特效页面和普通页面。
布局一般分为菜单+LOGO，主体内容和尾部的版权说明。
特效页面的布局不确定，普通页面的布局一般分上中下，中间部分又分上下结构或左右结构。先把大体框架搭起来，再一点点往里填，会好做一点。
最后给大家一个参考网站：http://www.w3school.com.cn/里面前端需要的东西基本上都有了。遇到问题也可以去里面找解决方法。个人极力推荐。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
