精华内容
下载资源
问答
  • 静态网页设计

    2013-11-18 10:48:13
    静态网页设计
  • 关于一个简单的静态网页设计
  • HTML静态网页设计

    万次阅读 多人点赞 2018-05-13 22:03:39
    第一周:HTML写静态网页1.HTML理论介绍及常用格式(1).HTML主体格式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title...

    第一周:HTML写静态网页

    一、HTML理论介绍及常用格式

    1.HTML主体格式基本结构
    <!DOCTYPE html>
    <html>
    <head>
    <mate charset="utf-8"/>
    <title>标题</title>
    </head>
    <body>
    主要内容
    </body>
    </html>
    解说:整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题


    2.常用标签:

    标题标记

    <h1></h1>

    ...
    <h6></h6>

    <p></p>段落标签

    <b></b> <strong></strong>加粗  

    <i></i>倾斜

    <br/>换行


    &nbsp;空格

    <img src="" alt="" title=""/> 图片【gif,png,jpg】src:图片的链接地址 alt:图片加载失败的时候,在图片原本的位置显示的提示文本
    title:鼠标悬停的时候,显示的提示文本

    <a href="" target=""></a> 超链接  href:链接地址  target:打开新网页的打开方式,默认是在本页面打开

    <div></div> 盒子

    <span></span>

    3.css样式:

    内联样式: <标记 style="属性1:属性值1;属性2:属性值2;..."></标记>
    内部样式:在head中添加<style></style>

    4.选择器:
    (1)标签选择器:在<>中的标记都可以作为标签选择器
    语法:
    <style>
    标记{
    属性1:属性值1;
    属性2:属性值2;
                }
    </style>
    (2)class选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“.”进行声明,多个class选择器可以同时作用于一个标记。
    语法:
    <style>
    .color1{
    属性1:属性值1;
    属性2:属性值2;
                }
            .color2{
    属性1:属性值1;
    属性2:属性值2;
    }
    </style>
    <p class= "color1 color2">M</p>
    id选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“#”进行声明,他是唯一的,取名的时候不能使用关键字
    语法:
    <style>
    #color1{
    属性1:属性值1;
    属性2:属性值2;
    }
    #color2{
    属性1:属性值1;
    属性2:属性值2;
    }
    </style>
    <p id= "color1">M</p>

    :hover 伪类选择器,表示鼠标经过事件
    包含选择器:必须要有包含的关系
    比如:.box p
    <div class="box">
    <p></p>
    </div>


    (5)常用的css属性:
    width:宽  取值px/%
    height:高  取值px/%
    background-color 背景颜色
    font-size 字体大小
    font-weight:bold;字体加粗
    line-height  行高
    color 字体颜色
    text-align:center/left/right 文本居中/居左/居右
    border:边框宽度  边框颜色  边框样式; 边框
    box-showdow:水平阴影的位置,垂直阴影的位置,高斯模糊的距离,阴影的宽度,阴影的颜色以及透明度,阴影的样式
    border-radius:边框圆角
    transform:rotate(10deg) scale(1.2); 动画,旋转动画单位deg  缩放动画
    transtion:all 0.3s; 过渡动画,单位ms/s
    margin:外边距
    padding:内边距

    (6)元素类型
    块元素:

    特征:独占一行,可以设置宽高,一般情况下作为容器。
    若宽不指定的情况下默认与父元素宽度相等,若高不指定的情况下,则它的高度由其内容来决定。
    对于块元素,我们若指定了宽度,可以使用margin-left与margin-right取值为auto来进行水平居

    例如:div、p、h1~h6


    行内元素:
    特征:不独占一行,设置不上宽高。
    行内元素的大小由其内容大小来决定。
    例如:span、a


    行内块元素:隶属于行内元素,但是又具有块元素的特征。

    特征:既不独占一行,又能设置宽高。


    (7).元素类型转换
    display:block; 转为块元素
    display:inline; 转为行内元素
    display:inline-block;转为行内块元素


    (8)浮动
    float:left; 左浮动
    float:right; 右浮动
    作用:通过浮动,我们可以使块元素在同一行显示


    (9)列表
    无序列表

    <ul>
    <li></li>
    <li></li>
    ...
    </ul>


    有序列表

    type的取值:1、a、A、i、I

    <ol type="">
    <li></li>
    <li></li>

    </ol>


    自定义列表
    <dl>
    <dt>名词</dt>
    <dd>解释</dd>
    </dl>




    (10)css样式:
    外部样式的引用
    <link   href="外部样式文件的地址"></link>

    去掉下划线:
    text-decoration: none;

    去掉列表默认的样式:
    list-style: none;

    平移动画
    transform: translateX(20px) ;
    translateX:在x轴的平移,取值为正,向右平移,取值为负,向左平移
    translateY:在y轴的平移,取值为正,向下平移,取值为负,向上平移。


    (11)background:背景颜色  背景图片链接地址  背景图片平铺方式  背景图片水平方向的位置  背景图片垂直方向的位置
    参数二:url("")
    参数三:默认repeat,no-repeat 不平铺  repeat-x水平平铺   repeat-y垂直
    参数四:默认left,取值left/right/center/px/%
    参数五:默认top,取值top/bottom/center/px/%


    (12)position定位
    可以有四个方位进行定位:
    left、top、right、bottom

    绝对定位:position:absolute;
    特征:参照物是具有定位属性的父元素,不占据原本的位置(脱离文档流)
    相对定位:position:relative;
    特征:参照物是自己原本的位置,占据自己原本的位置(不脱离文档流),一般情况下作为包含块


    固定定位:position:fixed;
    特征:参照物当前窗口,它的位置与父元素无关,也与当前所在位置无关。


    (13)高度塌陷
    高度塌陷出现的契机:当没有给父元素高度,并且它里面所有的子元素都发生浮动的时候,会出现高度塌陷。
    why? 父元素没有指定高度,那么它的高度由其子元素来决定,当子元素都给了浮动,【浮动是脱离文档流的(不再占据自己原本的位置)】,
    父元素测量不到子元素的高度,高度显示为0
    解决:
    给父元素添加overflow:hidden;
    在子元素的最后添加一个空盒子,并且给这个空盒子添加clear:both;




    (14)opacity透明度
    他的取值[0,1] 0:全透明  1:不透明




    (15)display:none; 隐藏

    opacity:0; 与display:none;区别
    使用它们两个的时候,都可以实现不可见的功能,但是opacity:0的时候,这个元素它存在只是透明度发生变化
    ,而是display:none;这个元素不占据位置(移除)


    (16)选择器的权重

    “*”通配符权重为0000
    标签选择器的权重为0001
    class选择器的权重为0010
    id选择器的权重为0100
    内联样式的权重为1000
    伪类选择器的权重 0010
    群组选择器的权重等于它自己本身的权重
    包含选择器的权重为所有权重之和


    当属性出现重复的时候,会遵从权重高的那个,当权重相同的时候,后写的属性值会覆盖前面的那个




    (17)图片整合
    本质:就是对背景图片进行定位。
    使用的契机:背景图片大于盒子的时候。




    (18)锚链接
    定义锚点,使用id来定义 :<p id="back">锚点</p>
    定义锚链接,使用a标签:<a href="#back">锚链接</a>




    (19)overflow:hidden/scroll/auto
    hidden:超出显示区域的部分隐藏
    scroll:无论内容有木有超出显示区域,都会显示滚动条
    auto:当内容超出显示区域的时候,则显示滚动条,否则不显示。




    (20)子类选择器
    .nav li:nth-child(1),小括号中可以使用2n或者2n+1/2n+1,选中奇数或者是选中偶数个,
    通过1/2/3...可以选中.nav下面的第n个li。



    二、项目实战

    (一)一些粗浅的想法。

    1.拿到一个需求,第一步不是去按照自己的想法立刻去敲代码,首先应该做好规划,就以写静态网页为例,写规划的时间要远远小于你自己后期改代码的时间。

    2.添加注释。添加注释是很好的习惯,在刚写代码的时候,添加的注释要尽可能的详细,这会为后期的维护和项目的交接提供很好的便利,不然没人看的懂你的代码。

    3.变量名的选择。在取变量名的时候,千万不要使用拼音,因为拼音看多了,真的是接受不了。使用英文的变量名会好很多,见文知意。

    4.代码书写完,功能实现之后,要去优化自己的代码,让自己的代码更加简洁,可读性更强

    (二)书写项目导航栏(以CNDS为例)


    首先:对于这个导航栏分析一下,第一个cnds图标放在一个盒子里(logo),然后给文字信息一个盒子(content),所以CNDS和文字信息都在同一个盒子(nav)

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>CNDS</title>
    		<style type="text/css">
    			/*上面这部分是书写这个box盒子的格式,其中包括大小,背景颜色,以及位置*/
    			.nav{
    				width: 1000px;
    				height: 50px;
    				/*给出背景颜色,可以更好的判断盒子的位置,最后再滤除背景颜色*/
    				/*background: red;*/
    				margin: 20px 10px;
    			}
    			.logo{
    				width: 95px;
    				height: 40px;
    				/*margin-top: 10px;*/
    				float: left;
    				margin: 10px;
    			}
    			.logo img{
    				line-height: 40px;
    			}
    			.content{
    				width: 500px;
    				height: 35px;
    				margin: 5px;
    				/*background: bisque;*/
    				float: left;
    			}
    			.content ul{
    				/*去除列表格式*/
    				list-style: none;
    			}
    			.content li{
    				/*去除列表格式*/
    				list-style: none;
    				/*使列表排成一排*/
    				float: left;
    				/*上下间隔为0,左右间隔为5个像素*/
    				margin: 0 5px;
    				/*上下居中*/
    				line-height: 100%;
    			}
    			.content li a {
    				/*去除超链接的下划线*/
    				text-decoration: none;
    				/*超链接的字体颜色:黑色*/
    				color: black;
    			}
    			.content li a:hover{
    				/*使用hover动画,改变鼠标经过事件*/
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<!--给出一个大盒子nav,用于存放CNDSlogo和文本-->
    		<div class="nav">
    			<div class="logo">
    				<!--导入图片使用<img src="图片地址">-->
    				<img src="img/CNDS.png"/>
    			</div>
    			<div class="content">
    				<ul>
    					<li><a href="#">首先</a></li>
    					<li><a href="#">博客</a></li>
    					<li><a href="#">学院</a></li>
    					<li><a href="#">下载</a></li>
    					<li><a href="#">GitChat</a></li>
    					<li><a href="#">TinyMind</a></li>
    					<li><a href="#">商城</a></li>
    					<li><a href="#">VIP</a></li>
    					<li><a href="#">其他</a></li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>


    (三)一个完整页面的设计

    1.功能需求

    (1)以设计稿为主,页面宽度可以参考下面网址,设计稿相对于下面网址做了小修改
    (2)总时间为4小时 首页和文章详情页面(如图)
    (3)详情页面的新闻详情不需要自己单独排版,随便复制内容 调整 行高 和字体大小就可以了
    (4)轮播先用一张图片代替  images文件夹已经提供
    (5)分享也用一张图片代替,images文件夹已经提供
    (6)页面的制作完全按照设计稿   文字 和图片可以随便复制,但是布局出来的效果要和设计稿一样

    原网站:http://yigujin.wang/

    2.代码实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>上机考试</title>
    		<style type="text/css">
    			.box{
    				width: 100%;
    				height: 100%;
    				/*background: red;*/	
    			}
    			.box .head{
    				width: 100%;
    				height: 105px;
    				background: white;
    			}
    			.head .logo{
    				width: 235px;
    				height: 65px;
    				background: blue;
    				float: left;
    				margin: 0 20px;
    				background: url(img/logo.jpg) no-repeat;
    			}
    			.head .nav{
    				width: 650px;
    				height: 65px;
    				/*background: blueviolet;*/
    				float: right;
    				margin: 0 200px;
    			}
    			.nav ul{
    				list-style: none;
    				text-align: center;
    				line-height: auto;
    			}
    			.nav li{
    				width: 75px;
    				height: 25px;
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    				text-align: center;
    				line-height: 25px;
    			}
    			.nav li a{
    				text-decoration: none;
    				color: black;
    				font: 10px;
    				font-weight: bold;
    				display: block;
    			}
    			.nav li:nth-child(1):hover{
    				background: ;
    				
    			}
    			.nav li:nth-child(2):hover{
    				background: red;	
    			}
    			.nav li:nth-child(3):hover{
    				background: red;	
    			}
    			.nav li:nth-child(4):hover{
    				background: red;	
    			}
    			.nav li:nth-child(5):hover{
    				background: red;	
    			}
    			.content{
    				width: 1100px;
    				height: 2500px;
    				/*background: blue;*/
    				margin: 0 100px;
    				margin-bottom: 200px;
    			}
    			.main{
    				width: 800px;
    				height: 100%;
    				/*background: green;*/
    				float: left;
    				margin: 0 10px;
    			}
    			
    			.main .bg{
    				width:800px ;
    				height: 300px;
    				margin: 10px 0;
    				
    			}
    			.bg img{
    				width:100% ;
    				height: 100%;
    			}
    			.text1{
    				width: 100%;
    				height: 215px;
    				
    			}
    			.text1 .bg-sb{
    				width: 270px;
    				height: 200px;
    				margin: 2px 2px;
    				float: left;
    				
    			}
    			.bg-sb img{
    				width:100%;
    				height: 100%;
    			}
    			.text1 .essay{
    				width: 380px;
    				height: 200px;
    				float: left;
    				/*background: violet;*/
    				margin: 0 10px;
    			}
    			
    			.essay ul{
    				list-style: none;
    				text-align: left;
    			}
    			.essay li{
    				list-style: none;
    				
    			
    			}
    			.essay li:nth-child(1){
    				font-size: 18px;
    				font-weight: bold;
    			}
    			.essay li:nth-child(4){
    				font-size: 18px;
    				font-weight: bold;
    				margin: 10px ;
    			}
    			.essay li a{
    				display: block;
    				text-decoration: none;
    				font-size: 12px;
    				color: rgb(168,181,213);
    				float: left;
    				margin:  0 10px;	
    			}
    			.main .avd1{
    				width: 800px;
    				height: 200px;
    				/*background: hotpink;*/
    				
    			}
    			.adv1 img{
    				width: 800px;
    				height: 200px;
    			}
    			.consult{
    				width:240px;
    				height: 100%;
    				/*background: gold;*/
    				float: left;
    				margin: 0 20px;
    			}
    			.consult1{
    				width: 240px;
    				height: 85px;
    				/*background: yellowgreen;*/
    				margin: 10px 0;
    			}
    			.consult1 img{
    				width: 100%;
    				height: 85px;
    				margin: 10px 0;
    			}
    			.consult2{
    				width: 240px;
    				height: 480px;
    				/*background: darkgrey;*/
    				border: 1px solid white;
    			}
    			.consult2 p{
    				font-size: 18px;
    				font-weight: bold;
    				margin: 5px 5px;
    			}
    			.consult2 ul{
    				list-style: none;
    			}
    			.consult2 li{
    				width: 200px;
    				display: block;
    				list-style: none;
    				margin: 15px 0;
    				/*border: 1px dashed black;*/
    				border-bottom: 1px dashed black;
    				
    			}
    			.consult2 li a{
    				text-decoration: none;
    				color: gray;
    			}
    			.foot{
    				width: 100%;
    				height: 260px;
    				background: black;
    				margin-bottom: 20px;
    			}
    			.title{
    				width: 1100px;
    				height: 100px;
    				background: gray;
    				margin: 10px 30px;
    			}
    			.title ul{
    				list-style: none;
    			}
    			.title li{
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    			}
    			.title li a{
    				text-decoration: none;
    				color: white;
    			}
    			.num{
    				width:1100px;
    				height: 50px;
    				margin: 100px 30px;
    			}
    			.num ul{
    				list-style: none;
    				
    			}
    			.num li{
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    				color: white;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="head">
    				<div class="logo">
    					
    				</div>
    				<div class="nav">
    					<ul>
    						<li  ><a style="color: red;"href="#">本站首页</a></li>
    						<li><a href="#">Nana主题</a></li>
    						<li><a href="#">随笔笔记</a></li>
    						<li><a href="#">技术文档</a></li>
    						<li><a href="#">手气不错</a></li>
    						<li><a style="background: rgb(192,30,34);color:white ;">搜索</a></li>
    					</ul>
    				</div>
    			</div>
    			<div class="content">
    				<div class="main">
    					<div class="bg">
    						<img src="img/banner.jpg"/>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是9折或85折的优惠,经过与老薛主机首席运营官Mars的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="adv1">
    						<img src="img/ad04.jpg"/>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="adv2">
    						
    					</div>
    				</div>
    				<div class="consult">
    					<div class="consult1">
    						<img src="img/ad01.jpg"/>
    					</div>
    					<div class="consult2">
    						<p>最新文章</p>
    						<ul>
    							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
    							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
    							<li><a href="#">帝国之双面佳人第六十章</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    						</ul>
    					</div>
    					<div class="consult1">
    						<img src="img/ad01.jpg"/>
    					</div>
    					<div class="consult2">
    						<p>最新文章</p>
    						<ul>
    							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
    							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
    							<li><a href="#">帝国之双面佳人第六十章</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    						</ul>
    					</div>
    					
    				</div>
    			</div>
    			<div class="foot">
    				<div class="title">
    					<ul>
    						<li>友情链接:</li>
    						<li><a href="#">百度</a></li>
    						<li><a href="#">博客</a></li>
    					</ul>
    				</div>
    				<div class="num">
    					<ul>
    						<li>copyright@zbpNana主题</li>
    						<li>桂ICP备1400471号</li>
    						<li>Theme by zbpNana </li>
    						<li>Powered by Z-BlogPHP</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    结束语:第一次写博客,还有很多欠缺的地方,请各位大神多多指教。


    展开全文
  • jsp简单静态网页设计

    2016-04-28 15:53:22
    jsp实验--简单静态网页设计,设计在线调查问卷。附原代码,实验报告,实验结果。可以直接运行。
  • dreamweaver的静态网页设计较为简单 智慧校园为主题的网页制作
  • dreamweaver静态网页设计方案实验一.docx
  • html静态网页设计 采用的外部样式来设计贵美商城网站
  • 静态网页设计和HTML语言,基础教程
  • 静态网页设计教材ppt

    2011-03-14 14:16:58
    网页设计教材,静态网页设计,css和javaScript学习与应用
  • 个人静态网页设计实例报告

    热门讨论 2011-05-25 12:59:56
    个人静态网页设计,本人制作粗糙,但是易于理解,对于要求不太高的个人静态网页设计,应该够用了吧!互相学习!
  • 静态网页设计论文.doc

    2010-05-21 23:07:29
    静态网页设计论文静态网页设计论文,对大家有帮助的话,希望大家喜欢啊,去下载吧
  • 一百多个采用css+div技术设计的静态网页设计实例
  • 宠物咖啡HTML静态网页设计作业由DIV+CSS布局制作,共1个页面,顶部及左侧导航为空链接,页面宽度980PX,制作了页面背景图。首页制作了小表单窗口,页数少,单基础技术都包含,无特殊HTML技术,初级网页设计水平。
  • HTML+CSS美食静态网页设计

    万次阅读 多人点赞 2020-03-02 16:24:31
    爱尚美食网页 用Adobe Dreamweaver CS6 制作 代码如下: HTML代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>爱尚美食</title> <!--链接图片及...

    爱尚美食网页

    用Adobe Dreamweaver CS6 制作 

    代码如下:

    HTML代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8" />
    <title>爱尚美食</title>
    <!--链接图片及css -->
    <link rel="shortcut icon" type="images/x-icon" href="images/xlogo.png"/>
    <!--引入样式 -->
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    
    <body>
    
    <!--头部开始 -->
    <header>
    
    <div class="language_change">
    <select name="language">
    <option>简体中文</option>
    <option>English</option>
    </select >
    
    <select name="currency">
    <option>人民币</option>
    <option>Dollor</option>
    </select>
    </div>
    <div class="title"><p>爱尚美食</p></div>
    
    <div class="logo"></div>
    
    <div class="login_resister"><a href="#">登录</a>|<a href="#">注册</a></div>
    
    <div class="shop_cart"><a href="#">购物车</a></div>
    
    </header>
    
    
    <menu>
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">主食</a></li>
    <li><a href="#">荤菜</a></li>
    <li><a href="#">素材</a></li>
    <li><a href="#">甜品</a></li>
    <li><a href="#">小吃</a></li>
    </ul>
    </menu>
    
    <article>
    <div class="topic1">
    <p></p>
    <h1>每日推荐</h1>
    <div class="search">
    <input type="text"/>
    <input type="button" value="站内搜索"/>
    </div>
    <ul>
    <li>
    <a href="#"><img src="images/可乐鸡翅.jpg"/></a>
    <span>28yaun</span>
    <h5>可乐鸡翅</h5>
    </li>
    <li>
    <a href="#"><img src="images/蛋糕.jpg"/></a>
    <span>15yaun</span>
    <h5>提拉米苏</h5>
    </li>
    <li>
    <a href="#"><img src="images/糖醋排骨.jpg"/></a>
    <span>28yaun</span>
    <h5>糖醋排骨</li>
    <li>
    <a href="#"><img src="images/龙虾.jpg"/></a>
    <span>75yaun</span>
    <h5>深海龙虾</h5></li>
    </ul>
    
    </div>
    
    <div class="topic2">
    <p></p>
    <h1>优惠菜品</h1>
    <div class="shaoma">
    <h2>微信公众号<h2>
    <hr></hr>
    <img src="images/m.png"/>
    </div>
    <ul>
    <li>
    <a href="#"><img src="images/生蚝.jpg"/></a>
    <span>49yaun</span>
    <h5>蒜蓉生蚝</h5>
    </li>
    <li>
    <a href="#"><img src="images/东坡肉.jpg"/></a>
    <span>49yaun</span>
    <h5>东坡肉</h5>
    </li>
    <li>
    <a href="#"><img src="images/蛋糕1.jpg"/></a>
    <span>15yaun</span>
    <h5>丝袜蛋糕</h5></li>
    <li>
    <a href="#"><img src="images/披萨.jpg"/></a>
    <span>50yaun</span>
    <h5>芝士披萨</h5></li>
    </ul>
    </div>
    
    <div class="topic3">
    <p></p>
    <h1>今日套餐</h1>
    <div class="tishi">
    <h2>特别提示<h2>
    <hr></hr>
    <h4><br>请客人保管好自己的财产安全和帐户密码。</h4>
    </div>
    
    <ul>
    <li>
    <a href="#"><img src="images/咖喱饭.jpg"/></a>
    <span>39yaun</span>
    <h5>咖喱鸡饭</h5>
    </li>
    <li>
    <a href="#"><img src="images/套餐.jpg"/></a>
    <span>28yaun</span>
    <h5>排骨饭</h5>
    </li>
    <li>
    <a href="#"><img src="images/蛋糕2.jpg"/></a>
    <span>20yaun</span>
    <h5>千层蛋糕</h5></li>
    <li>
    <a href="#"><img src="images/蛋糕3.jpg"/></a>
    <span>25yaun n </span>
    <h5>水果蛋糕</h5></li>
    </ul>
    </div>
    
    </article>
    
    
    <footer>
    <p>
    <a href="#">关于我们</a>|
    <a href="#">联系我们</a>|
    <a href="#">加入收藏</a>|
    <a href="#">留言板</a>
    </p>
    <p class="company">版权所有©2019爱尚美食&nbsp;&nbsp;Email:ASMS@163.com</p>
    <p>地址:衡阳市珠晖区衡阳师范学院	&nbsp;&nbsp;&nbsp;联系方式:88888888</p>
    </footer>
    </body>
    </html>
    

    CSS代码:

    @charset "utf-8";	/* CSS Document */
    *{
    	margin:0 auto;
    	padding:0px;
    }
    
    body{
    	height:100%;
    	width:100%;
    	font-size:14px;
    	font-family:"微软雅黑";	/*定义文字大小及字号*/
    	}
    header{
    	background:#F6F6F6;
    	width:1200px;
    	height:80px;
    	margin:0 auto;
    	position:relative;
    }
    
    header div{
    	float:left;}
    	
    .title{
    	font-family:"华文行楷";
    	font-weight:bold;
    	font-size:68px;
    	text-align:center;
    	letter-spacing:10px;
    	line-height:80px;
    	margin-top:5px;
    	margin-left:27%; 
    	color:#333;
    	}
    	
    .language_change select{
    	margin-left:10px;
    	height:24px;
    	}
    	
    .logo{
    	height:60px;
    	width:60px;
    	margin-top:10px;
    	background:url(../images/logo.jpg) no-repeat center center;
    	background-size:100% 100%;
    	position:absolute;
    	margin-left:36%;}
    	
    a{
    	text-decoration:none;/*无文本装饰效果*/
    	color:#06F;}/*可用取色工具取色*/
    	
    a:hover{
    	color:#F00;}
    	
    .login_resister{
    	float:right;
    	margin-right:10px;
    }/*登录注册框架位置*/
    
    .shop_cart{
    	float:right;/*浮动在右边*/
    	margin-right:40px;;/*购物车框架位置*/}
    	
    .shop_cart a{
    	padding-left:22px;
    	background:url(../images/cart.PNG) no-repeat left center;
    	}
    
    /*列表样式*/
    li{
    	list-style:none;
    	}
    	
    menu{
    	background:#F6F6F6;
    	height:70px;
    	width:1200px;
    	}
    	
    menu>ul{
    	/*height:70px;*/
    	float:left;
    	margin-left:12%;
    	}
    	
    menu>ul>li{
    	height:35px;
    	width:150px;
    	margin-top:30px;
    	background:#FDEA66;
    	float:left;
    	margin-left:2px;
    	text-align:center;/*文本居中*/
    	line-height:34px;
    	
    	}
    
    menu>ul>li>a{
    	display:inline-blockl;/*设置或检索对象是否及如何显示,内联块元素*/
    	height:40px;
    	width:90px;
    	font-weight:bold;
    	font-size:20px;
    	letter-spacing:1em;/*字间距*/
    	color:#333;
    	}
    	
    menu>ul>li>a:hover{
    	color:#F0C;}
    	
    	
    article{
    	width:100%;}
    	
    .topic1{
    	height:300px;
    	width:1200px;
    	background:#F6F6f6;}
    
    .search{
    	float:right;
    	margin-right:30px;
    	margin-top:30px;
    	width:230px;
    	height:180px;
    	background:#FDEA66;
    	text-align:center;
    }
    	
    .search>input{
    	margin-top:60px;
    	margin-left:35px;
    	height:30px;
    	width:160px;
    	border:3px solid #06F; /*输入与搜索边框颜色*/
    	float:left;
    	background:#fee; 
    	}
    	
    .search>input:last-child{
    	margin-top:10px;
    	margin-left:65px;
    	height:30px;
    	width:110px;
    	border:3px solid #06F; /*输入与搜索边框颜色*/
    	background:#fee; /*字体背景颜色*/
    	float:left;
    	color:#06F; /*字体颜色*/
    	letter-spacing:0.2em;
    	font:bold 22px/24px "华文行楷";}
    
    .topic1 p{	
    	height:30px;
    	width:30px;
    	background:url(../images/xlogo.png) no-repeat center;
    	background-size:100% 100%;
    	margin-left:20px;
    	margin-top:10px;
    	display:inline-block;}
    	
    .topic1 h1{
    	font-family:"华文行楷";
    	font-size:38px;
    	color:#06F;
    	display:inline-block;}
    	
    .topic1 a{
    	display:inline-block;}
    	
    .topic1 ul{
    	margin-left:30px;
    	position:absolute;}
    .topic1 ul li{
    	float:left;
    	margin-right:20px;
    	}
    .topic1 ul li img{
    	height:150px;
    	width:200px;}
    	
    .topic1 ul li img:hover{
    	border:5px solid #F00;}
    .topic1 ul li span{
    	display:block;
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:20px;
    	color:#F00;}
    	
    .topic1 ul li h5{
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:22px;
    	color:#6C0;}
    	
    .topic2{
    	height:300px;
    	width:1200px;
    	background:#F6F6f6;}
    	
    .shaoma{
    	float:right;
    	margin-right:30px;
    	margin-top:30px;
    	width:230px;
    	height:260px;
    	background:#FDEA66;
    	font:bold 22px/24px "华文行楷";
    	text-align:center;
    	display:block;}
    	
    .shaoma h2{
    	font-family:"华文行楷";
    	font-size:45px;
    	color:#06F;
    	margin-top:20px;}
    	
    .shaoma img{
    	display:block;
    	float:right;
    	height:180px;
    	width:180px;
    	background-size:100% 100%;
    	margin-top:1px;
    	margin-right:25px;}
    
    .topic2 p{	
    	height:30px;
    	width:30px;
    	background:url(../images/xlogo.png) no-repeat center;
    	background-size:100% 100%;
    	margin-left:20px;
    	margin-top:10px;
    	display:inline-block;}
    	
    .topic2 h1{
    	font-family:"华文行楷";
    	font-size:38px;
    	color:#06F;
    	display:inline-block;}
    	
    .topic2 a{
    	display:inline-block;}
    	
    .topic2 ul{
    	margin-left:30px;
    	position:absolute;}
    .topic2 ul li{
    	float:left;
    	margin-right:20px;
    	}
    .topic2 ul li img{
    	height:150px;
    	width:200px;}
    	
    .topic2 ul li img:hover{
    	border:5px solid #F00;}
    .topic2 ul li span{
    	display:block;
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:20px;
    	color:#F00;}
    	
    .topic2 ul li h5{
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:22px;
    	color:#6C0;}
    	
    .topic3{
    	height:300px;
    	width:1200px;
    	background:#F6F6f6;}
    	
    .tishi{
    	float:right;
    	margin-right:30px;
    	margin-top:30px;
    	width:230px;
    	height:160px;
    	background:#FDEA66;
    	font:bold 22px/24px "华文行楷";
    	text-align:center;
    	color:#06F;}
    
    .tishi h2{
    	color:#06F;
    	margin-top:20px;}
    	
    .topic3 p{	
    	height:30px;
    	width:30px;
    	background:url(../images/xlogo.png) no-repeat center;
    	background-size:100% 100%;
    	margin-left:20px;
    	margin-top:10px;
    	display:inline-block;}
    	
    .topic3 h1{
    	font-family:"华文行楷";
    	font-size:38px;
    	color:#06F;
    	display:inline-block;}
    	
    .topic3 a{
    	display:inline-block;}
    	
    .topic3 ul{
    	margin-left:30px;
    	position:absolute;}
    .topic3 ul li{
    	float:left;
    	margin-right:20px;
    	}
    .topic3 ul li img{
    	height:150px;
    	width:200px;}
    	
    .topic3 ul li img:hover{
    	border:5px solid #F00;}
    .topic3 ul li span{
    	display:block;
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:20px;
    	color:#F00;}
    	
    .topic3 ul li h5{
    	text-align:center;
    	font-family:"华文行楷";
    	font-size:22px;
    	color:#6C0;}
    	
    footer{
    	width:1200px;
    	height:60px;
    	/*margin-top:10px;*/
    	text-align:center;
    	background:#F6F6F6;}  /*调整页脚高度宽度及顶部间距把页脚居中*/
    
    .footer p:first child a{
    	display:inline-block;
    	width:120px;
    	line-height:20px;
    	text-align:center;
    	border-right:1px solid #CCC;
    	}
    	
    .footer p:first child a:last child{
    	border-right:none;}
    
    .footer p{
    	line-height:180px;
    	text-align:center;
    	color:#CCC;}
    	

    页面如下图:

     

    博主附赠:

    鉴于有很多小白私信我,做出来的页面和我的不一样。我给出详细操作步骤。

    1、首先,新建一个文件,名字可以随便取,我这里的文件名叫:爱尚美食网页。在 爱尚美食网页 文件夹里面还需要有一个 css文件夹一个images文件夹,和一个index.html文件。如下图所示:

     

    2、然后将上面 ↑ 的 html 代码 复制粘贴到你的index.html 文件里面。这边建议初学小白可以使用记事本打开index.html ,然后将我上面的html代码粘上。点击保存即可。如下图:

     

    3.接下来,打开你刚刚新建的css文件夹,新建一个文本文件。将后缀.txt修改成.css。我这里的命名是 index.css(注意.css是文件后缀哦)。然后使用记事本打开index.css文件,将我上面的css代码复制粘贴到里面,点击保存即可。如下图:

     

    4、完成上述步骤基本上成功大一半了,最后就是图片了。你们想用自己的也行,想用我的也行。下面贴上我的图片地址,方便你们下载使用。

    链接:https://pan.baidu.com/s/1tf062bkkTeBqLNDFjT3duw 
    提取码:v7c8 

    这个文件夹下下来,解压是一个images文件夹,你可以覆盖你的images文件夹。至此,大功告成。

     

     

     

    展开全文
  • 奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-奔梦向前-静态网页设计_网页制作-2020-04-24-3。
  • HTML5静态网页设计比赛随着计算机科技,互联网+的模式不断更新发展。为加强同学们的创新思维,锻炼学生们的设计能力,进一步的让同学们了解计算机网页的设计,我院于11月20日下午两点举办HTML5静态网络设计比赛。...

    HTML5静态网页设计比赛

    随着计算机科技,互联网+的模式不断更新发展。

    46d838e0170aa55bd22c3bd289123796.giffc0773f9e14b43969c8c5edf523afab8.png46d838e0170aa55bd22c3bd289123796.gif

    为加强同学们的创新思维,锻炼学生们的设计能力,进一步的让同学们了解计算机网页的设计,我院于11月20日下午两点举办HTML5静态网络设计比赛。本次比赛本着激励同学们认真学习专业知识,凝聚创新精神的理念,帮助同学们尝试新事物,拓宽视野。

    46d838e0170aa55bd22c3bd289123796.gif9c38cd22cd8a420399cc0397832a37ed.png46d838e0170aa55bd22c3bd289123796.gif

    本次大赛一共分为初赛和决赛两场比赛。因为是面向全体人工智能学院的所有同学,所以综合决定将会对参赛者进行赛前针对性培训和练习。

    HTML5网页设计比赛要求内容健康、充实且积极向上;内容具有观赏性、普及性、艺术性、可读性,语言文字有特色;设计思路清晰,明确表达设计意图。 

    框架及表格结构清楚合理,页面内容清晰明了;页面具有较强的个人设计创意;网页整体风格创意,色彩搭配鲜明,内容布局合理。

    科技面向未来,祝愿我院学子在接下来的网页设计大赛中取得优异的成绩,展现自己的才智学识。

    4775321b7c31131066adcafb44ded157.gif

    HOU.AI

    河北东方学院人工智能学院

    School of artificial Intelligence, Hebei Oriental University

    b19495afc367acaad15f1a4753377d21.png

    投稿&联系我们 | 微信号:HDY_AI_college

    编辑:编辑部 孙宁

    图片:人工智能学院学生会科创部 新媒体中心

    排版:技术部 陈思雨

    审核:高权 王拯

    责任出版:人工智能学院新媒体中心

    805d7e21ee0786e3987f23d96eabafd5.png

    新媒体中心 © 2020

    微信公众平台 | 新浪微博 | 抖音

    ALL RIGHTS RESERVED

    展开全文
  • 因特网正在改变世界,它促成了网络经济雏形的形成,特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,已经发展成为新的传播媒体,所以全球...
  • 网页设计期末作业,静态网页,HTML,大学生期末必过,90分以上,部分代码含有注释
  • 静态网页设计及实例html

    热门讨论 2011-09-06 00:15:52
    网页设计 html 静态网页 含实例 网页设计 html 静态网页 含实例
  • html+jsp 简单静态网页设计

    万次阅读 多人点赞 2018-04-02 20:10:19
    实验一 简单静态网页设计一、实验目的1. 复习使用记事本编辑网页的方法。2. 熟悉不同表单控件类型的应用。3. 练习使用记事本在网页中添加表单与表单元素。二、实验内容根据提供的素材设计在线调查问卷。三、实验...

    实验一  简单静态网页设计

    一、实验目的

    1.   复习使用记事本编辑网页的方法。

    2.   熟悉不同表单控件类型的应用。

    3.   练习使用记事本在网页中添加表单与表单元素。

    二、实验内容

    根据提供的素材设计在线调查问卷。

    三、实验要求

    1.   熟练掌握使用记事本进行简单网页编辑的方法。

    2.   能够区分不同表单元素的应用场景。

    3.   掌握表单与表单元素的元素名和属性对。

    四、实验学时:4学时

    五、实验步骤

    0.   实验准备:(1)在硬盘上为本实验建立文件夹(以下称为“实验文件夹”)。

    1.   根据提供的素材设计在线调查问卷:

    (1)   从开始菜单启动记事本;

    (2)   在记事本中,录入一个最简合法HTML文档;

    (3)   设置该HTML文档首页如图1。要求按照首页来设计页面index.html.使用的图片在image文件夹中。
    (4)   在首页点击提交后转向企业电子商务调查问卷.
    (5)   打开本实验提供的WORD文档questionnaire.doc,这个调查问卷比较长,浏览该调查问卷的内容。由于该调查问卷比较长,选取并标示该调查问卷中具有代表性的问题(更改一下文本背景),准备将它们在网页中进行实现,保存该WORD文档;
    (6)   在记事本中添加表单;
    (7)   在表单中插入表单元素,用于在网页中显示步骤中标示的问题及答案;
    (8)   为表单添加提交和重置按钮;
    (9)   保存网页为questionaire.htm
    提示:本实验没有标准答案,但是在将WORD文档中的调查问题及答案移植到网页中时,要尽可能多地使用到讲过的表单元素(如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等)。另外,网页上调查问卷的答案的表现形式与并不一定要与WORD中的一致,而是应该选择使用更符合需要的表单元素,例如对于答案选项比较多的问题来说,应该优先选用下拉菜单/列表,单选使用下拉菜单,多选使用列表。

    六、实验代码

    index:
    <!Doctype html>
    <html>
    <head>
    <title>实验一  简单静态网页设计</title>
    <style type="text/css">
    body{
    	margin:0 auto;
    	background-color:#FFF;
    	font-size:12px;
    	
    	}
    .top,.bottom,.center {
        height: auto;
        width: 100%;
    }
    .right{
    	width: 44px;
        height: 300px;
    	float:right;
    }
    .left{
    
    	 width: 35px;
        height: 300px;
    	float:left;
    }
    #left {
        width: 30%;
        float: left;
        padding: 0 10px;
        height: auto;
    }
    #right {
        width: 50%;
        float: right;
        height: auto;
        padding-top: 30px;
    }
    #line{
        height: 300px;
        border-color: green;
        border-left-style: solid;
        border-width: 2px;
    }
     
    </style>
    <body>
    		<img class="top" src="images/01.gif" style="height: 180px;">
    		 <h1 style="margin: -5px;"></h1>
    		<div class="center">
            <img src="images/02.gif" class="left">
            <img src="images/04.gif" class="right">
            <div id="left">
                <img src="images/reg.gif"> <strong>注册帮助</strong>
                <ul>
                    <li>会员名:为会员登录网站的通行证,长度控制在3-20个字符之内。</li>
    				<br/>
                    <li>密码:请设定在6-20位之间。</li>
    				<br/>
                    <li>确认密码:确认密码必须与密码一致。</li>
    			    <br/>
                    <li>Email:请填写有效的Email地址,以便于与您联系。</li>
                </ul>
            </div>
    
            <div id="right">
                <form  action="questionaire.html" name=form1 οnsubmit="return check()">
                    <table>
                        <tr>
                            <td>用户名:</td>
                            <td>
    						<input type="text" name="username" placeholder="长度控制在3-20个字符"  >
    						
                            </td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td>
    						<input type="password" name="password" placeholder="请设定在6-20位之间" >
    						
                            </td>
                        </tr>
                        <tr>
                            <td>确认密码:</td>
                            <td>
    						<input type="password" name="cpassword" >
    
                            </td>
                        </tr>
                        <tr>
                            <td>性别:</td>
                            <td>
    						<input type="radio" name="sex" value="男" />男 
    						<input type="radio" name="sex" value="女" />女
    						</td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td>
    						<input type="email" name="email">
    			
                            </td>
                        </tr>
                        <tr>
                            <td><input type="submit" name="submit" value="提交" >
                            </td>
                            <td><input type="reset" name="reset" value="重置" />
                            </td>
                        </tr>
    					
                    </table>
                </form>
            </div> 
    		   <table id="line">
                <tr>
                    <td valign="top"></td>
                </tr>
            </table>
    
    	</div>
    		<img class="bottom" src="images/03.jpg">
    </body>
    </html>
    <script language="javaScript">
    function check(){
     
    	if(document.form1.username.value.length<3||document.form1.username.value.length>20){
    	alert("请输入符合条件的用户名");
    	return false;
    	}
    	var pd= document.form1.password.value; 
    	if(document.form1.password.value.length<6||document.form1.password.value.length>20){
    	alert("请输入符合条件的密码");
    	return false;
    	}
    	var cpd= document.form1.cpassword.value; 
    	
    	if(document.form1.cpassword.value.length<6||document.form1.cpassword.value.length>20){
    	alert("请再次输入密码!");
    	return false;
    	}
    	if(pd !== cpd){
    	alert("两次密码不相同");
    	return false;
    	}
    	if(document.form1.email.value.indexOf("@")=-1||document.form1.email.value.length=0){
    	alert("请输入正确格式的邮箱!");
    	return false;
    	}
    	return true;
    }
    
    </script>
    调查问卷:
    <html>
    <head>
    <title>问卷调查</title>
    <style type="text/css">
    body {
        padding: 0px 10% 0px 10%;
    }
    #ft {
    	text-align:center;
    	font-size:29px;<!--2号中文字体 -->
    	font-family:SimSun;<!--宋体-->
    	
    }
    
    .fp {
    	font-family:KaiTi;<!--楷体-->
    	font-size:14px;<!--5号中文字体 -->
    }
    
    .st {
    	font-size:21px;<!--3号中文字体 2-->
    	font-family:SimHei;<!--黑体-->
    }
    
    .sp {
    	font-size:16px;<!--5号中文字体 -->
    	font-family:SimSun;<!--宋体-->
    	
    }
    </style>
    </head>
    <body>
    <div>
        <p id="ft"><b>企业电子商务调查问卷</b></p>
        <div class="fp">
            <p>尊敬的先生/女士:</p>
            <p style="text-indent:2em;">您好!为了了解目前企业开展电子商务的状况和问题,我们课题组希望您能协助填写这份调查表。在此,我们郑重承诺,调查结果仅供研究使用。如果您有兴趣和需要,我们可以将最终的统计和分析结果通过电子邮件的方式反馈给您。
    		</p>
            <p style="text-indent:2em;">本次调查对于电子商务的界定是:通过计算机网络完成的购买和销售货物以及服务的行为,这些货物或服务的订单是通过相关网络下达的,但是支付和物流可以是网下进行的。通过传真、电话和电子邮件达成的交易不算在内。
    		</p>
            <p style="text-indent:2em;">非常感谢您的大力支持!</p>
            <p style="text-align:right;">广东省电子商务发展规划前期研究课题组
    		</p>
        </div>
        <hr/>
    </div>
    
    <div>
    	<b class="st">一、企业基本简况</b>
    	<br/>
    	<div class="sp">
    		<p>
    		1.企业名称:
    		<input name="qyname" size=30 type="text">
    		注册地:
    		<input name="zcaddress" size=10 type="text">
    		<br/>
    		<br/>
    		2.您所在的企业的职务(职业):
    		<input name="zyname" size=20 type="text">
    		<br/>
    		<br/>
    		3.企业成立时间:
    		<input name="cltime" size=20 type="text">
    		<br/>
    		<br/>
    		4企业所在行业:
    		<input name="szhy" size=20 type="text">
    		<br/>
    		<br/>
    		<u style="font-size=20px">
    		<b>
    		以下选择题,若无特别声明,皆为多项选择题
    		</b>
    		</u>
    		<br/>
    		<br/>
    		<p>
    		5.您所在企业的所有制形式为:(单选)<br/>
    		<input  name="r1" type="radio"/>国有 
    		<input  name="r1" type="radio"/>集体 
    		<input  name="r1" type="radio"/>民营 
    		<input  name="r1" type="radio"/>外资 
    		<input  name="r1" type="radio"/>合资
    		<input  name="r1" type="radio"/>股份制 
    		<input  name="r1" type="radio"/>其他 
    		<input  name="qt1" size=5 type="text" />
    		</p>
    		<p>
    		6.您所在企业的类型为: (多选)<br/>
    		<input  name="r2" type="checkbox"/>流程型制造业
    		<input  name="r2" type="checkbox"/>离散型制造业
    		<input  name="r2" type="checkbox"/>混合型企业
    		<input  name="r2" type="checkbox"/>旅游服务业
    		<input  name="r2" type="checkbox"/>餐饮服务业
    		<input  name="r2" type="checkbox"/>信息服务业
    		<input  name="r2" type="checkbox"/>金融服务业
    		<input  name="r2" type="checkbox"/>物流服务业
    		<input  name="r2" type="checkbox"/>其他
    		<input  name="qt2" size=10 type="text" />
    		</p>
    		<p>
    		7.您所在企业是否是上市公司:(单选)
    		<select>
    		<option value="00">请选择</option>
    		<option value="01">是</option>
    		<option value="02">不是</option>
    		</select>
    		<br>
    		</p>
    		</p>
    		<br/>
    		</div>
    </div>
    <div>
    		<b class="st">二、企业信息化总体状况</b>
    		<p>
    		8.您所在企业最需要的信息包括(选择其中最重要的4项信息):
    		</p>
    		<table>
                    <tr>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">产品开发</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">生产技术</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">技术引进</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市场行情</td>
                        </tr>
                        <tr>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">竞争对手</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">政策法规</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">薪酬水平</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">人才信息</td>
                        </tr>
                        <tr>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">财务状况</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">投资融资</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市场预测</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">员工关系</td>
                        </tr>
                        <tr>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">客户信息</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">供应商信息</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">产品价格</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">质量管理</td>
                        </tr>
                        <tr>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">社交活动</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">合作伙伴信息</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">企业绩效</td>
                        <td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">行业动态</td>
                        </tr>
                        <tr>
                         <td><input type="checkbox" name="cbox" />其他 
    					 <input name="qt3" size="5" type="text" >
                            </td>
                        </tr>
                    </table>
    		<p>
    		9.您所在企业从何时开始采用ERP(或MIS)系统?
    		<select id="sel">
    		</select>
    		年
    		</p>
    		<p>
    		10.您所在企业网站的更新周期是多长时间?(单选)
    		<select>
    		<option value="0">单选,请下拉</option>
    		<option value="1">每天</option>
    		<option value="2">每周</option>
    		<option value="3">每月</option>
    		<option value="4">每季度</option>
    		<option value="5">每半年</option>
    		<option value="6">半年以上</option>
    		</select>
    		</p>
    		<p>
    		11.您认为目前您所在企业存在的主要问题:
    		</p>
    		<table border="0">
    		<tr>
    		<td>  </td> <td>非常重要</td> <td>重要</td> <td>一般 </td> <td>不重要</td> <td>不存在</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="110"/>利润增长 </td>
    		<td align="center" align="center"><input  name="r4" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="r4" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="r4" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="r4" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="r4" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="111"/>市场份额</td>
    		<td align="center" align="center"><input  name="c5" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c5" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c5" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c5" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c5" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="112"/>战略管理</td>
    		<td align="center" align="center"><input  name="c6" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c6" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c6" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c6" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c6" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="113"/>部门协调</td>
    		<td align="center" align="center"><input  name="c7" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c7" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c7" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c7" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c7" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="114"/>员工流失</td>
    		<td align="center" align="center"><input  name="c8" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c8" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c8" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c8" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c8" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="115"/>激励机制</td>
    		<td align="center" align="center"><input  name="c9" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c9" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c9" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c9" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c9" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="116"/>人才培养和引进</td>
    		<td align="center" align="center"><input  name="c10" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c10" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c10" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c10" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c10" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="117"/>领导班子</td>
    		<td align="center" align="center"><input  name="c11" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c11" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c11" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c11" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c11" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="118"/>企业信息化建设</td>
    		<td align="center" align="center"><input  name="c12" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c12" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c12" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c12" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c12" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="119"/>品牌经营</td>
    		<td align="center" align="center"><input  name="c13" type="radio"/>5</td>
    		<td align="center" align="center"><input  name="c13" type="radio"/>4</td> 
    		<td align="center" align="center"><input  name="c13" type="radio"/>3</td> 
    		<td align="center" align="center"><input  name="c13" type="radio"/>2</td> 
    		<td align="center" align="center"><input  name="c13" type="radio"/>1</td>
    		</tr>
    		<tr>
    		<td> <input  name="r3" type="checkbox" value="120"/>其他<input  name="qt4" size=5 	type="text" /></td>
    		</tr>
    		</table>
    </div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
        onload = function ()
        {
             var year=new Date().getFullYear(); //获取当前年份
             
           var sel = document.getElementById ('sel');//获取select下拉列表
           for ( var i = 1990; i <= year; i++)//循环添加2006到当前年份的每个年份依次添加到下拉列表
           {
               var option = document.createElement ('option');
               option.value = i;
               var txt = document.createTextNode (i);
               option.appendChild (txt);
               sel.appendChild (option);
           }
    	  /********************************************************/
    	   
        }
        function checkCount(cbox) {
            var dx4 = document.getElementsByName("dxcbox");
            var num = 0;
            for (i = 0; i < dx4.length; i++){
                if (dx4[i].checked)
                    num += 1;
    		}
    			if (num > 4) {
                alert("最多可以选择四个!");
    			//num-=1;
                cbox.checked = false;
            }
    	   
        }
    	 
    	
    </script>
    


    展开全文
  • 北京网站建设公司:静态网页设计的一些特点 网页可以分为静态页面与动态页面两种,但如想网站有很好的排名,也被搜索引擎所收录的话,那么静态页面是最合适的。因此,今天要讲的是静态网页设计的一些特点,从而更...
  • 静态网页设计模板

    热门讨论 2012-05-04 15:11:23
    有十个左右的网页设计
  • 学生个人静态网页设计作品之我的家乡 设计思路 知识运用 内容介绍 页面代码展示 作品展示 设计思路 页面使用居中效果,留下留白简洁简便,使浏览者在浏览的过程中有一种舒适感,在视觉方面有着清晰安静的画面,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,526
精华内容 1,410
关键字:

静态网页设计