css网页设计代码案例 HTML+CSS网页设计与制作

编程之家2026-06-051032次浏览

大家好，感谢邀请，今天来为大家分享一下css网页设计代码案例的问题，以及和HTML+CSS网页设计与制作的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

网页设计CSS解释

光说解释，但不知道解释哪些部分？我就将我觉得该解释的说说吧。

以"#"开头的成为id选择器，在程序中用id="id名称"调用；以"."开头的成为类别选择器，在程序中使用class="类别名称"调用；二者实现效果一样，只是在不同情况下按需选择。此外还有标记选择器和行内样式两种css样式。

常用选项解释：padding表示内边距；margin表示外边距；float表示浮动属性（设置该属性后可实现图文混排）；background-image表示背景图片；background-repeat表示是否允许背景重复；border表示边框；text-align表示文本水平居中显示。

padding:10px 0px 0px 0px;从上开始表示顺时针内边距分别为10px，0px，0px，0px。margin和border的用法与padding类似，可以类推；

border-bottom:1px solid#CAEFC4表示下边框为1px实线颜色为#CAEFC4。其他各边以此类推。

差不多了吧，呵呵，祝你好运！

求一个html或者css、js的网页设计作业

<!DOCTYPE HTML>

<!--

*{margin:0;padding:0;border:0;}

body{

font-family: arial,宋体, serif;

font-size:12px;

}

#nav{

width:180px;

line-height: 24px;

list-style-type: none;

text-align:left;

/*定义整个ul菜单的行高和背景色*/

}

/*==================一级目录===================*/

#nav a{

width: 160px;

display: block;

padding-left:20px;

/*Width(一定要)，否则下面的Li会变形*/

}

#nav li{

background:#CCC;/*一级目录的背景色*/

border-bottom:#FFF 1px solid;/*下面的一条白边*/

float:left;

/*float：left,本不应该设置，但由于在Firefox不能正常显示

继承Nav的width,限制宽度，li自动向下延伸*/

}

#nav li a:hover{

background:#CC0000;/*一级目录onMouseOver显示的背景色*/

}

#nav a:link{

color:#666; text-decoration:none;

}

#nav a:visited{

color:#666;text-decoration:none;

}

#nav a:hover{

color:#FFF;text-decoration:none;font-weight:bold;

}

/*==================二级目录===================*/

#nav li ul{

list-style:none;

text-align:left;

}

#nav li ul li{

background:#EBEBEB;/*二级目录的背景色*/

}

#nav li ul a{

padding-left:20px;

width:160px;

/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/

}

/*下面是二级目录的链接样式*/

#nav li ul a:link{

color:#666; text-decoration:none;

}

#nav li ul a:visited{

color:#666;text-decoration:none;

}

#nav li ul a:hover{

color:#F3F3F3;

text-decoration:none;

font-weight:normal;

background:#CC0000;

/*二级onmouseover的字体颜色、背景色*/

}

/*==============================*/

#nav li:hover ul{

left: auto;

}

#nav li.sfhover ul{

left: auto;

}

#content{

clear: left;

}

#nav ul.collapsed{

display: none;

}

-->

#PARENT{

width:300px;

padding-left:20px;

}

</style>

<li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">网页教学网</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

var LastLeftID="";

function menuFix(){

var obj= document.getElementById("nav").getElementsByTagName("li");

for(var i=0; i<obj.length; i++){

obj[i].onmouseover=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

obj[i].onMouseDown=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

obj[i].onMouseUp=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

obj[i].onmouseout=function(){

this.className=this.className.replace(new RegExp("(?|^)sfhover\\b"),"");

}

function DoMenu(emid)

{

var obj= document.getElementById(emid);

obj.className=(obj.className.toLowerCase()=="expanded"?"collapsed":"expanded");

if((LastLeftID!="")&&(emid!=LastLeftID))//关闭上一个Menu

{

document.getElementById(LastLeftID).className="collapsed";

}

LastLeftID= emid;

}

function GetMenuID()

{

var MenuID="";

var _paramStr= new String(window.location.href);

var _sharpPos= _paramStr.indexOf("#");

if(_sharpPos>= 0&& _sharpPos< _paramStr.length- 1)

{

_paramStr= _paramStr.substring(_sharpPos+ 1, _paramStr.length);

}

else

{

_paramStr="";

}

if(_paramStr.length> 0)

{

var _paramArr= _paramStr.split("&");

if(_paramArr.length>0)

{

var _paramKeyVal= _paramArr[0].split("=");

if(_paramKeyVal.length>0)

{

MenuID= _paramKeyVal[1];

}

if(_paramArr.length>0)

{

var _arr= new Array(_paramArr.length);

}

//取所有#后面的，菜单只需用到Menu

//for(var i= 0; i< _paramArr.length; i++)

{

var _paramKeyVal= _paramArr[i].split('=');

if(_paramKeyVal.length>0)

{

_arr[_paramKeyVal[0]]= _paramKeyVal[1];

}

if(MenuID!="")

{

DoMenu(MenuID)

}

GetMenuID();//*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果

menuFix();

--></script>

静态网页设计制作中的布局模式

一、静态布局（Static Layout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

在移动端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app变革之rem）

（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid")是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域(viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用@media媒体查询和网格系统(Grid System)配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS给单一网页不同设备返回不同样式的技术统称。

OK，关于css网页设计代码案例和HTML+CSS网页设计与制作的内容到此结束了，希望对大家有所帮助。

html超链接代码怎么写(html点击文字跳转链接代码)ai识图找位置？ai识图找不同