精华内容
下载资源
问答
  • HTML网页设计常用标签及属性

    千次阅读 2018-09-18 20:03:28
    标签名 属性名='属性值' 属性名='属性值' .../> 2.注意; 单标签在最后有一个正斜杠 '/' 2.双标签: 1.结构格式: <标签名 属性名='属性值'...>内容&...

    在认识标签前,我们先了解了解标签的结构,标签分两大类,一种是单标签,另一种是双标签。
    标签的基本结构:

    1.单标签:

    			1.结构格式:
    				<标签名 属性名='属性值' 属性名='属性值' .../>
    			2.注意;
    				单标签在最后有一个正斜杠 '/'
    

    2.双标签:

    			1.结构格式:
    				<标签名 属性名='属性值'...>内容</标签名>
    			2.注意:
    				双标签会分两个部分,左边叫开始标签,右边叫结束标签,结束标签必须有正斜杠'/'
    

    html中标签也可以分为块级标签,内联标签,

        	1.1块级标签:
        	如果两个同样的标签写在一起,出现在不同的行上,这种就叫块级标签,比如说<h1>标签,div标签,
        	特点占据整行或多行,自带换行效果,除了div外,一般的块级标签都会有内外边距,宽度和高度
    
    		1.2内联标签:
    	    如果两个同样的标签写在一起,出现在一行则表示这是内联标签,特点是不会占据多余面积,
    	  内联标签没有内外边距,但可以通过css来设置,也没有上下边距,没有宽度和高度
    	注意:
        	在内联标签中,有一个标签,img标签是有边距和宽度及高度的,叫行内块级标签	
    

    常用的标签介绍:

    1.标题标签:
    	<h1>标题1[字号最大]</h1>
    	<h2>标题2</h2>
    	<h3>标题3</h3>
    	...
    	<h6>标题6</h6>
    		标题标签一共有6个级别,即h1~h6,字号从大到小
    
    2.段落标签:
    	<p>内容</p>
    		代表文章的一个段落
    
    3.换行标签:
    	<br/>
    
    4.图片标签:
    	<img src="" alt>
    		src表示图片路径,可写相对路径,也可以写绝对路径
    		alt表示当图片没有时,也就是裂图时描述图片的信息或者替代的文本
    
    5.超链接标签:
    	<a href="链接网址">链接的文字或者图片</a>
    	注意:
    		<a href="url" target= "_blank" title="新建
    		的网页的标题">内容</a>
    
    		#target 表示用户点击链接,打开的方式,他的值是固定的
    			_self 表示在当前页面打开新的页面,也就覆盖当前的页面[默认值]
    			_blank 表示在新建的浏览器窗口中打开一个新的窗口
    
    6.列表标签:
    列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单,它是含有语义的,标签结构如下
    	1.有序列表:
    	    <ol>
    	        <li> </li>
    	    </ol>
    
    	2.无序列表:
    	    <ul>
    	        <li> </li>
    	    </ul>
    
    		3.自定义列表:
    		    <dl>
    		        <dt> </dt>
    		    </dl>
    		列表之间可以进行嵌套使用
    
    7.表格标签
    	表格元素及相关样式
    		1、<table>标签:声明一个表格
    
    		2、<tr>标签:定义表格中的一行
    
    		3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
    
    	表格相关样式属性
    	border-collapse 设置表格的边线合并,如:border-collapse:collapse;
    

    标签的属性:

    		1.属性格式:
    			<标签名 属性名='属性值'...>内容</标签>
    		2.属性有什么作用?
    			描述标签的作用,给用户进行标签的提示或者增加标签的功能
    
    		3.实体字符(具有特性功能的字符)
    			1.&nbsp :表示空白字符,即一个空格
    			2.&lt :小于号
    			3.&gt :大于号
    
    		4.无意义标签div和span
    			1.div常用于包含其他的标签,用于表示网页的一整部分内容,一般用于网页的布局
    			2.span常用于包含其他的标签或者普通的文本内容,也是用于网页布局的一种,本身没有任何其他的独特属性
    
    展开全文
  • 网页设计课程设计报告

    万次阅读 多人点赞 2019-03-01 21:45:11
    学号 课 程 设 计 课程名称 网页设计 题 目 鑫晨之家特效网站设计 专 业 软件工程 ...

    学号

     


     

     

     

     

     

     

     

    课    程   设   计

     

    课程名称    网页设计   

                      

     

    题       目

        鑫晨之家特效网站设计    

    专       业

             软件工程               

    班       级

             1173班             

    姓       名

                                        

    成       绩

    _____________________________

    指 导 老 师

                                                      

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

                 2019 1  6日至 2019  1  13 

    武汉华夏理工学院信息工程学院

     

    课 程 设 计 任 务 书

     

    课程名称:网页设计                     指导教师:汪汝  

    班级名称: 软件1173、1174班           开课院、系:计算机与网络工程系  

     

    一、课程设计目的与任务

    网页设计是软件专业的一门专业必修课。网页设计课程设计可以充分弥补课堂教学和实验中知识深度和广度有限的不足,更好地帮助学生系统地掌握网页设计课程的主要内容。通过课程设计的综合训练,能培养学生实际分析问题、编程和动手的能力,帮助学生系统掌握网页设计课程的主要内容,更好地完成教学任务。为后续课程打好基础。

    要求学生根据所学的网页设计的相关知识,能够针对一个具体的系统,进行需求分析,总体设计、详细设计、编码、测试等,完成题目要求的功能。本课程设计是设计企业网站主页。

    二、课程设计的内容与基本要求

    学生根据所学的网页设计的知识,能够针对企业网页,进行系统的需求分析、系统设计、编码及测试,系统必须实现以下功能:

    1. 企业LOGO、网站的主要栏目和概况介绍
    2. 产品介绍
    3. 图片
    4. 动画
    5. 网页除用到框架外,还使用CSS样式
    6. 网页美观、页面内容丰富

    三、学时分配进度安排

    序号

    设计内容

    所用时间

    1

    下发任务书,集中讲解课程设计原理与方法。系统需求分析、架构及界面设计

     

    1天

    2

    网页设计

    1天

    3

    网页设计

    1天

    4

    调试及撰写报告

    1天

    5

    答辩

    1天

    合    计

    1周

    四、课程设计考核及评分标准

    1.设计报告要求

    课程设计报告要求逻辑清晰、层次分明、书写整洁。格式包括标题、提要、正文(包括需求分析,总体设计、详细设计、调试分析、心得、答辩、成绩评定。)附录(程序清单)。设计报告须每人一份,独立完成。

    2.评分标准

    评分依据

    评分成绩

    1、学习态度认真、遵守纪律

    10

    2、设计分析合理性

    10

    3、设计方案正确性、可行性

    20

    4、设计结果正确性

    30

    5、设计报告的规范性

    10

    6、实践环节的独立性与主动性

    10

    7、设计验收

    10

    总分

    100分

    注:成绩等级:优(90分—100分)、良(80分—89分)、中(70分—79分)、及格(60分—69分)、60分以下为不及格。

    五、指导时间

    周次

    星期一

    星期二

    星期三

    星期四

    星期五

    第18周

    第1-4节

     

    第3-6节

     

    第3-4节

    地点

    现教221

     

    现教221

     

    现教221

                                            

     

     执笔:          日期:2018-12-24

     审阅:            日期:       

     

     

     

     

     

     

     

     

      

    1 设计题目 1

    2 开发环境 1

    3 开发工具 1

    4 完成时间 1

    5 设计思想 1

    5.1 网页设计思想 1

    5.2 设计方案 2

    6 设计过程及设计步骤 2

    6.1  网页结构设计 2

    6.2  CSS样式设计 3

    6.3  爱心飘落效果设计 4

    6.4  背景切换效果设计 5

    6.5  轮播图效果设计 7

    6.6  网页整合、填充以及整顿 8

    7 测试运行 9

    8 评价与修订 9

    9设计体会 10

     

     

    参 考 文 献 11

    附  录 12

    致  谢 25

    课程设计成绩评定表 26

     

     

     

     

     

     

     

    1 设计题目

    鑫晨之家特效网站设计(正文宋体五号,1.25倍行距)

    2 开发环境

    硬件环境:微机系列,内存在1G以上,软件环境:Microsoft Windows 10

    3 开发工具

    Dreamweaver8

    4 完成时间

    2019.1.6----2019.1.13

    5 设计思想

    5.1 网页设计思想

    网页设计由三大部分组成,分别为HTML超文本标记语言、CSS层叠样式表和JavaScript脚本语言。其中HTML主要做整个网页的基本架构,CSS用于为网页文档中的元素添加各类样式,给网页添加色彩,而JavaScript主要是给网页的页面添加动态效果和功能,从而实现网页的各种效果。

    而在本次网页设计也将会用到这三种语言实现整个网页的效果。在设计时先将整个网页的框架搭建起来,然后再用具体的图片和文字以及超链接代替结构中的内容,然后给设计的内容框架添加CSS样式效果,给网页添加色彩。大致样式设置后在用JavaScript结合框架和样式给网页设置动态效果。最后再整顿整个网页的框架、样式以及动态效果,使得网页美观,特效更加明显。

    5.2 设计方案

    首先用HTML写出网页的基本框架,其中大致需要用到HTML5新增文档结构标签的页眉标签<header>、导航标签<nav>、书标签<section>、文章标签<article>、侧栏标签<aside>、页脚标签<footer>,这几个标签将主要构造出网页的大致框架结构,另外还要用一些基本标签来完善框架的内容设计。比如添加添加一些段落标签、超链接标签、容器标签、以及图像标签和列表标签。

    接下来利用CSS样式来修饰以上标签,在修饰是需要用到适合和元素选择器来进行更好的控制元素的样式。在设计时,背景用图片代替,并设置大小属性为cover覆盖整个网页,网页的其它部分也设置一些颜色,但为了既能够显示它们的颜色,又能显示出背景图片的效果,所以在设置颜色时需要用能够设置透明的rgba()样式来设置颜色的效果。

    样式基本设计好之后,然后就是设计网站的一些动态效果,这时需要用到JavaScript脚本语言,其中会运用到jQuery模板来简化代码的实现,以便更好更有效的让网页多实现几个动态效果。主要效果将包括背景切换效果、爱心飘落效果、图片轮播效果和短视频播放效果。设计时需要结合CSS的样式元素进行合理的搭配。

    最后来补充网页的具体内容和整理网页的整个效果,主要是填充各个模块的标题、网站说明和菜单栏以及其它空余部分的空间,尽量让它显得不那么的单调。全部内容填充好之后再进行整顿整个网页的效果,使其位置更加的合适以及颜色更加的搭配。(为了不破坏代码,避免自己的逻辑跟不上,每个效果模块可以单独设计,最后在合理的整顿合并到一个网页中。)

    6 设计过程及设计步骤

    6.1  网页结构设计

    1.打开Dreamweaver8软件,新建一个HTML文件,修改头文件里面的编码、标题和去掉多余的内容,并调整好格式。

    2.在body里面设计网页结构,先写个大致的框架头部用一个<header>页眉标签,接下来用一个<div>标签来包裹下面的所有内容。然后在<div>标签里面依次放入<nav>导航标签、<aside>做侧栏标签、<section>节标签、<aside>右侧栏标签和<footer>页脚标签来制作<dev>里面空间的框架。其中导航标签将放在最上面当作菜单,接下来一层中间是节标签将是正文内容,两边是用两个侧栏标签来装左右两边侧栏的内容。

    3.进一步往中间层深入构造下一级框架。先在导航栏里面放多个<a>超链接标签来当菜单目录,接下来在两个侧栏标签里面各自都放一个字体标签和多个段落标签来当侧栏内容。然后在节标签里面放两个文章标签来分两段来放中间正文,并在两个文章标签里面都依次页眉标签、段落标签和页脚标签,进行再次分层。最后分别在页眉标签和页脚标签里面添加字体标签。

    6.2  CSS样式设计

    1.在HTML文本的head头标签里面添加<style>标签来放置CSS样式,然后把所有的内边距和外边距设置为0。

    2.设置body标签的背景颜色,最大宽度为900px,border边框为solid和边框颜色以及内部字体颜色。

    3.设置header标签背景颜色和字体颜色,display设置为把block块级元素,文本居中。

    4.设置各级标题标签的字体大小和文本居中。

    5.设置导航nav标签为块级元素,宽度相对为100%,浮动为左浮动,文本居中,设置颜色,相对外部标签顶部和底部都为20px。

    6.设置nav a:link和nav a:visited都为内联元素,设置它们的颜色,内边距10px,外边距5px,下边框3px,实线。并设置字体为粗字体。

    7.设置nav a:hover的背景颜色和字体颜色。nav h3外边距15。

    8.设置div的id=container并设置它的背景颜色。

    9.设置section为块级元素,宽度相对为60%,左浮动。

    10.设置article为块级元素,设置他的颜色以及外边距和内边框都为10px。

    11.设置article里面的header和footer的内边框都为5px。article的h1大小设置为18px。

    12.aside设置为块级元素,宽度相对为20%,左浮动。

    13.aside的h3设置外边距15px。aside p外边距15px,字体为加宽。

    14.footer设置为块级元素,两侧都不允许浮动,并设置它的背景颜色和字体颜色,文本居中,内边距为15px。

    15.footer h2 字体大小设置为14px。并设置它的颜色。设置a的颜色和a link文本下划线为无。

    HTML和CSS结合后的效果如图一显示。

          

                         图1  HTML+CSS网页设计效果

    6.3  爱心飘落效果设计

    1.新建一个HTML文本,在body里面写两个div标签,并设置它们的class分别为left和right。

    2.在head标签里添加style标签在里面设置body里面的div样式。

    3.设置left个right都为绝对定位,设置它们的绝对定位都为left 0xp top 0px 宽度为100px,高度为160px,背景颜色设置为红色,圆角属性border-raduis设置为(50px 50px 0px 0px),然后设置left的旋转角度为逆时针45度。right的旋转角度为顺时针45。这时两个div容器合在一起看起来就合成了一个完整的爱心。

    4.优化代码,在上面可以知道,两个div容器除了旋转角度的属性不一样外,其他的属性都是一样的,所以为了避免这么多的重复代码出现,可以吧这些重复的喝到一起写在一个类选择器中让两个容器共同使用它,所以可以用一个类选择器去同时引导另外两个选择器使用,为了结合后面需要用到的jQuery模板js代码,我这里的引导类选择器用snowfall-flakes作为类名,另外两个被领导的结合领导类的名字分别写为snowfall-flakes:before和snowfall-flakes:after。

    5.再将snowfall-flakes的属性设置为相对定位,高度和宽度都设置为20px,外边距设置为50px和auto。然后将之前left和right中相同代码部分放在snowfall-flakes:before,.snowfall-flakes:after中不相同的那一行代码也分别放在snowfall-flakes:before和snowfall-flakes:after中,然后注释之前的left和right代码。

    6.在body中写js代码,先将需要用到的两个jQuery模板库文件放到与该HTML文件的同目录里面的js文件夹中,然后在body标签中写入<script src="js/jquery-1.2.6.min.js"> </script>和<script src="js/snowfall.jquery.js"></script>两行代码吧这两个模板库引入带HTML中,然后写个script标签,在标签中写入$(document).snowfall({flakeCount : 200,maxSpeed : 5});这一行代码。

    7.最后改一下爱心的大小,把整体的一些与爱心相关的大小代码成倍数的减小,然后可以吧之前写的两个div删除,并在body的CSS样式里面添加一张背景图片,设置图片为平铺,外边距为0。

    最后爱心飘落的特效就出来了,其效果如图2,可以通过写的那行js代码来改变爱心飘落的数量和飘落的速度。

                                   图2  爱心飘落特效

    6.4  背景切换效果设计

    1.找16张图片,并且将这十六张片都按一定比例变小,大图片命名为1到16.jpg,小图片命名为1-1到1-16jpg,然后再制作一张图片做一个按钮(用来显示和关闭切换背景时的那些需要切换的图片),并将这些图片放在与HTML文件同目录下的images文件夹中。

    2.新建一个HTML文件,在body标签中写一个div标签设置它的id=img-wrap,然后在div标签包含一个ul无序列表标签,设置它的class=list,然后再ul标签里面包含16个li标签,设置它们的class=item,data-src的值分别等于images/(1到16).jpg(用来在js代码中方便切换背景图片寻找到对应的图片),然后再这些li标签里面分别包含img标签,并分别设置它们的src属性的值为images/(1-1到16-16).jpg图片路径。然后再第一个div标签的下面再写一个div标签设置id=tab-btn。

    3.在head标签里添加style标签用来添加CSS样式,各标签样式设置如下:

    .设置所有标签的内边距和外边距都为0。

    .设置body标签的背景图片为images/1.jpg,并且大小设置为覆盖整个网页页面。

    .设置img-wrap的宽度为相对100%,高度为150px,背景颜色为黑色,透明度为0.46。这个div容器是用来放置选择可选切换背景的图片的。

    .设置list的列表值类型为无,宽度为1000px,高度为100px,外边距为0 auto。

    .设置item为左浮动(使可选图片横排排列),外边距为0px 15px。

    .设置itm img的宽度为95px,高度为60px。

    .设置tab-btn为绝对定位,位置定位到网页的右上角,高度为50px背景图片为images/upseek.png,光标设置为pointer。(这个是一个用来显示和隐藏可选图片区域的按钮)。

    tab-btn:hover 当鼠标放在按钮上时,按钮向上移动64px,鼠标离开时回到原位置。

    4.写js代码,同样将上一个爱心飘落效果中的jQuery模板引入到该HTML代码中。然后写script标签,在里面写下面几行js代码

    $("#tab-btn").click(function(){

    $("#img-wrap").slideToggle();

    });

    //代码表示鼠标点击对应图片后寻找到对应图片的地址,然后将背景图片的地址换成点击图片得到的对应地址达到切换背景的效果。

    $(".item").click(function(){

    var uri = $(this).attr("data-src");

    $("body").css({

    "background-image":"url("+uri+")"

    });

    });

    设计效果如图3和图4所示:

                

                            图3  背景切换效果1

                

                            图4  背景切换效果2

    6.5  轮播图效果设计

    1.新建一个HTML文件,将它保存带到与背景切换的HTML同一个目录下,在body标签中写一个div标签设置它的id=lunbo,然后在div标签包含一个ul无序列表标签,设置它的id=shidian_img,然后再ul标签里面包含16个li标签,设置它们的class=img_lunbo,然后再这些li标签里面分别包含img标签,设置class=img_lunbo,并分别设置它们的src属性的值为images/(1到16).jpg图片路径。

    2.在head标签里添加style标签用来添加CSS样式,各标签样式设置如下:

    .设置全部背景颜色为绿色。

    .设置lunbo的高度和宽度都为500px,位置为left 100px,top 50px,关系型定位。

    .设置ul宽度和高度都相对为100%,位置为左上角,关系型定位。

    .设置li_lunbo宽度和高度都相对为100%,位置为左上角,绝对型定位。

    .设置img_lunbo宽度相对100%,高度为10px。

    3.写js代码,写script标签,在body里面写如下面js代码

               imgs=document.getElementById("shidian_img").children; //获取所以图片 并且存储到数组imgs数组里

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

                      imgs[i].style.display="none";             

                }                //循环获取到imgs里面的元素,并且把它们隐藏设置为none

              imgs[index].style.display ="block";   //当所有元素都隐藏了,在显示当前index所指的图片。 

              index ++;

              if(index >= imgs.length){  

                   index=0;                    

                }      //判断index是否大于imgs的长度,等于imgs的长度后在重新赋予它初始值0;           

            }

      timer=setInterval(show_img,1000); //建立周期定时器。

    设计完成后的效果如图5和图6所示。

                     

                             图5  轮播图效果1

                  

                             图6  轮播图效果2

    6.6  网页整合、填充以及整顿

    1.将以上三个特效整合到原网页的框架中:

    .爱心飘落特效的代码可将CSS代码放到框架的HTML中head里面的style标签里面,js代码可放在其body里面的代码的最后面的script标签中。

    .背景切换效果中body里面的所有代码都可以放在框架body标签里面的最上面。将CSS样式也加入框架head里的style中,注意的是把原来框架里面的body样式和爱心飘落特效里面的body样式都去掉换成背景切换中的body样式,然后js代码也直接放入script标签中。

    .轮播图效果中body里面的所由代码放在框架里section标签里面的都一个article标签里面,但为了使得这部分的网页内容更融洽和不显得那么的单调所以在这个article标签里面在加一层aside、section,article和aside标签,而把轮播图效果中body里面的所由代码放在所添加的这一层中的section里面的article中,左右两边的aside中分别放入由ps出来的两只小象图片。然后接着把除了body样式的所有样式代码和js代码分别放入框架的style标签和script标签中。

    2.将框架里面的nav标签和左aside标签中加入一些超链接,分别进入一些常用网站以及与自己相关网站的效果。然后在右aside标签中写上一些网站的说明。最后在header标签中再加一张由ps出来的网站logo图片。

    3.网站最终效果如图7图8所示。

            

                          图7  网站最终效果1                

                

                        图8   网站最终效果2

    7 测试运行

    网站的主要功能是能够快速的进入一些常用网站和自己的一些常用网站的登陆页面。其页面的所有动态效果说明如下。

    1. 运行网页后自动运行爱心飘落特效和图片轮播特效以及短视频播放。
    2. 点击右上角的按钮可显示和隐藏背景切换的可选图片区域,点击可选图片区域里面的图片可以网页背景切换成对应的图片。
    3. 点击由下划线的文字可进入对应的网页页面。

    8 评价与修订

    整个网页页面清晰,效果明显,去其爱心飘落特效是页面比较显眼的效果,可以吸引浏览者的眼光,它是网页页面最具有创造性和独特性的地方。还有轮播图虽然在很多网页中都能看到这种效果,但是在该网页中也比较显眼的地方,然后就是网页的顶部有一个可以切换背景的图片选择区,可以通过它切换背景,右上角有一个按钮可以将这个选择区域显示和隐藏,这使得网页显得更加的高大上,更有独特性。网页正文区域的下方有一些三个短视频,是完成的项目小游戏录屏,这让网页显得更加的新颖,内容丰满。另外网页有说明,也有一些常用网站的入口,这可以更加方便客户进入这些网站。页面中每个区域都有不同的颜色,

    不足的是网页内容不够丰满,有大片的空白区域显得有些浪费空间,还有就是网页单配颜色也不够美观,字体也不是很显眼和美观。这些都是美中不足的地方。

    网页的整个效果还是比较可以的,但需要使它更加美观和页面丰满,还需继续学习和努力。

    9设计体会

     

               

     

     

     

     参 考 文 献 

    [1] 1] HTML5网页前端设计,周文洁编著,北京:清华大学出版社,2018

    [2] HTML5网页前端设计实战,周文洁编著,北京:清华大学出版社,2018

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    附  录

    <!DOCTYPE>

    <html>

    <head>

    <meta charset="utf_8" />

    <title>鑫晨之家特效总站</title>

    <style>

    *{

    margin: 0;

    padding: 0;

    }

    body{

     

    background: url("images/1.jpg");

    background-size: cover;

    }

    #img-wrap{

    width: 100%;

    height: 150px;

    background-color: rgba(0,0,0,0.46);

    padding-top: 13px;

    }

    .list{

    list-style-type: none;

    width: 1000px;

    height: 100px;

    margin: 0 auto;

    }

    .item {

    float: left;

    margin: 5 15px;

    }

    .item img{

    width: 95px;

    height: 60px;

    }

    .item img:hover{

    color: #FF0099;

    }

    #tab-btn{

    position: absolute;

    top: 0;

    right: 0;

    width: 50px;

    height: 50px;

    background-image: url("images/upseek.png");

    cursor: pointer;

    }

    #tab-btn:hover{

    background-position-y: -64px;

    }

    .snowfall-flakes1{

    position: relative;/* 相对定位 监管绝对定位 */

    width: 20px;

    height: 20px;

    margin: 50px auto;

    /*background-color: #096;*/

    }

    .snowfall-flakes:before,.snowfall-flakes:after{/* ,并列 和 把相同的内容并到一起 */

    content: "";/* 激活伪元素的必要因素 */

    position: absolute;/* css重点和难点 绝对定位 */

    left: 0;

    top: 0;         /* 定位一般写到上面 */

     

    width: 5px;

    height: 8px;

    background: rgba(255,0,0,0.66);

    border-radius: 2.5px 2.5px 0px 0px;/* 圆角属性 */

    }

    .snowfall-flakes:before{

    transform: rotate(-45deg);/* css3变换属性 旋转 deg角度 */

    }

    .snowfall-flakes:after{

    transform: translateX(4.3px) rotate(45deg);/*  css3位移 css3变换属性 旋转 deg角度 */

    }

     

    header {

    background-color: rgba(210,50,50,0.46);

    display: block;

    color: #2178D8;

    text-align: center;

    }

    h1{

    font-size: 72px;

    margin: 0px;

    }

    h2{

    font-size: 24px;

    margin: 0px;

    text-align: center;

    }

    h3{

    font-size: 18px;

    margin: 0px;

    text-align: center;

    }

    nav{

    display: block;

    width: 100%;

    float: left;

    text-align: center;

    background-color: rgba(204,204,204,0.46);

    padding-top: 20px;

    padding-bottom: 20px;

    }

    nav a:link, nav a:visited {

    display: inline;

    border-bottom: 3px solid #00FFCC;

    padding: 10px;

    text-decoration: none;

    font-weight: bold;

    margin: 5px;

    }

    nav a:hover {

    color: #CC3333;

    background-color: rgba(255,255,0,0.46);

    }

    nav h3{

    margin: 15px;

    }

    #container{

    background-color: rgba(185,74,,221,0.46);

    }

    section{

    display: block;

    width: 70%;

    float: left;

    }

    article{

    background-color: rgba(0,255,204,0.16);

    display: block;

    margin: 0px;

    padding: 0px;

    }

    article header{

    padding: 5px;

    }

    article footer{

    padding: 5px;

    }

    article h1{

    font-size: 18px;

    }

    aside{

    display: block;

    width: 15%;

    float: left;

    }

    aside h3{

    margin: 15px;

    }

    aside p{

    margin: 15px;

    font-weight: bold;

    }

    footer{

    clear: both;

    display: block;

    background-color: rgba(51,0,204,0.16);

    color: #CC99CC;

    text-align: center;

    padding: 15px;

    }

    footer h2{

    font-size: 14px;

    color: #FF66FF;

    }

    a {

    color: #FF6633;

    }

    a:hover{

    text-decoration: underline;

    }

    .x{

    width:100%; height:166px;

    }

    #lunbo{ width:340px; height:160px;position:relative;left:0px;top:0px;}/* 定义轮播图片所显示的位置*/

    .ul_lunbo{width:100%; height:100%; position:relative;left:0px;top:0px}/*//为ul标签设置所在区域有*/

    .li_lunbo{width:100%; height:100%; position:absolute; left:140px;top:0px;}/*//为li标签设置所在区域有*/

     

    .img_lunbo{ width:100%; height:166px;}/*//为图片定义大小,并且是图片重合。*/

    ` video{float:left; margin: 100px 500px;}

    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

    <body>

    <div id="img-wrap">

    <ul class="list">

    <li class="item" data-src="images/1.jpg">

    <img src="images/1-1.jpg" alt="" />

    </li>

    <li class="item" data-src="images/2.jpg">

    <img src="images/2-2.jpg" alt="" />

    </li>

    <li class="item" data-src="images/3.jpg">

    <img src="images/3-3.jpg" alt="" />

    </li>

    <li class="item" data-src="images/4.jpg">

    <img src="images/4-4.jpg" alt="" />

    </li>

    <li class="item" data-src="images/5.jpg">

    <img src="images/5-5.jpg" alt="" />

    </li>

    <li class="item" data-src="images/6.jpg">

    <img src="images/6-6.jpg" alt="" />

    </li>

    <li class="item" data-src="images/7.jpg">

    <img src="images/7-7.jpg" alt="" />

    </li>

    <li class="item" data-src="images/8.jpg">

    <img src="images/8-8.jpg" alt="" />

    </li>

    <li class="item" data-src="images/9.jpg">

    <img src="images/9-9.jpg" alt="" />

    </li>

    <li class="item" data-src="images/10.jpg">

    <img src="images/10-10.jpg" alt="" />

    </li>

    <li class="item" data-src="images/11.jpg">

    <img src="images/11-11.jpg" alt="" />

    </li>

    <li class="item" data-src="images/12.jpg">

    <img src="images/12-12.jpg" alt="" />

    </li>

    <li class="item" data-src="images/13.jpg">

    <img src="images/13-13.jpg" alt="" />

    </li>

    <li class="item" data-src="images/14.jpg">

    <img src="images/14-14.jpg" alt="" />

    </li>

    <li class="item" data-src="images/15.jpg">

    <img src="images/15-15.jpg" alt="" />

    </li>

    <li class="item" data-src="images/16.jpg">

    <img src="images/16-16.jpg" alt="" />

    </li>

    </ul>

    </div>

    <div id="tab-btn"> </div>

     

    <header>

    <h1>鑫晨之家特效总站</h1>

    </header>

    <div id="container">

    <nav>

    <a href="https://www.baidu.com" target="_blank" >百度一下</a>

    <a href="https://www.taobao.com" target="_blank">淘宝</a>

    <a href="https://www.jd.com" target="_blank">京东</a>

    <a href="http://www.cnblogs.com/" target="_blank">博客园</a>

    <a href="https://blog.csdn.net/" target="_blank">博客</a>

    <a href="https://tieba.baidu.com" target="_blank">百度贴吧</a>

    <a href="https://www.nowcoder.com/" target="_blank">牛客网</a>

    <a href="https://weibo.com" target="_blank">微博</a>

    </nav>

    <aside>

    <h3>My Style</h3>

    <a style=" padding-left:40px;" href="https://user.qzone.qq.com/1476027184/main"  target="_blank"/>我的QQ空间</a>

    <br />

    <a style=" padding-left:40px;" href="https://weibo.com/u/6336414741/home"  target="_blank"/>我的微博</a>

    <br />

    <a style=" padding-left:40px;" href="https://i.csdn.net/#/uc/profile"  target="_blank"/>我的博客</a>

    <br />

    <a style=" padding-left:40px;" href="https://mail.qq.com/cgi-bin/frame_html?sid=1_cfIUKAR72LaT5i&r=2906efc2a8beaadb651dedb5da4bedcf"  target="_blank"/>我的邮箱</a>

    <br />

    <a style=" padding-left:40px;" https://www.cnblogs.com/star147/"  target="_blank"/>我的博客园</a>

    <br />

    <a style=" padding-left:40px;" href="http://acm.hdu.edu.cn/listproblem.php?vol=1"  target="_blank"/>算法练习系统</a>

    <br />

    </aside>

    <section>

    <article>

    <header>

    <h1>我的主页</h1>

    </header>

    <aside>

    <img class="x" src="images/x1.gif" />

    </aside>

    <section>

    <article>

    <div id="lunbo">

    <ul id="shidian_img" class="ul_lunbo">

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/1.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/2.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/3.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/4.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/5.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/6.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/7.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/8.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/9.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/10.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/11.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/12.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/13.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/14.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/15.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/16.jpg" />

    </li>

    </ul>

    </div>

    </article>

    </section>

    <aside>

    <img class="x" src="images/x2.jpg" />

    </aside>

    <footer>

    <h2>网页背景相册轮播图</h2>

    </footer>

    </article>

     

    <article>

    <header>

    <h1>我的项目</h1>

    </header>

    <video width="280" hight="250" controls autoplay>

    <source src="videos/11.mp4">

    </video>

    <video width="280" hight="250" controls autoplay>

    <source src="videos/12.mp4">

    </video>

    <video width="280" hight="250" controls autoplay>

    <source  src="videos/13.mp4">

    </video>

    <footer>

    <h2>游戏项目短视频</h2>

    </footer>

    </article>

    </section>

    <aside>

    <h3>网站说明</h3>

    <p>该网站为鑫晨公司打造的独立个人网站,网站由各种效果搭建而成,其主要功能为更加快速的进入一些常用网站,其特色为爱心飘落特效,背景图片切换以及背景相册轮播特效,其中还有自己写过的其中三个小游戏作品运行的录屏短视频。本人第一次通过独立学习查找资料尝试写出一个比较完整的网页作品,虽然美观不足,相信自己以后会更加努力的其打造出更多更加完美的网站。希望进本网站的朋友大力支持,谢谢。</p>

    </aside>

    <footer>

    <h2>精彩无限,欢乐无穷</h2>

    </footer>

    </div>

    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

    <script src="js/snowfall.jquery.js"></script>

    <script type="text/javascript">

    $("#tab-btn").click(function(){

    $("#img-wrap").slideToggle();

    });

     

    $(".item").click(function(){

    var uri = $(this).attr("data-src");

    $("body").css({

    "background-image":"url("+uri+")"

    });

    });

    $(document).snowfall({flakeCount : 40,maxSpeed : 3});

    index=0;

    function show_img(){

                 imgs=document.getElementById("shidian_img").children; //获取所以图片 并且存储到数组imgs数组里

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

                          imgs[i].style.display="none";

                 

                 }                                       //循环获取到imgs里面的元素,并且把它们隐藏设置为“”none“”

                 imgs[index].style.display ="block";   //当所有元素都隐藏了,在显示当前index所指的图片。

               

                 index ++;

                 if(index >= imgs.length){

                 

                          index=0;

                                     

                          }                      //判断index是否大于imgs的长度,等于imgs的长度后在重新赋予它初始值0           

                 }

     timer=setInterval(show_img,1000); //建立周期定时器。

     

    </script>

    </body>

    </html>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    致  谢

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    课程设计成绩评定表

    课程设计题目

     

    课程设计学生答辩或质疑记录:

    问题1:HTML、CSS和JavaScript的作用分别是什么?

    答:HTML主要做网页中的框架,CSS主要是渲染HTML中的标签样式,JavaScript主要是实现网页中的动态效果。

    问题2:display这个属性是做什么用的?

    答:display属性是规定元素应该生成的框的类型,此元素默认为inline,表示此元素被显示为内联元素。

    问题3:爱心飘落特效大致是如何实现的?

    答:用两个div容器通过CSS样式的设置制作成一个爱心,然后运用jQuery的JavaScript模板通过调用模板中的snowfall函数,具体的一句代码为:$(document).snowfall({flakeCount : 40,maxSpeed : 3});其中 flakeCount 参数是设置爱心飘落的数量,maxSpeed 参数是设置爱心飘落的最大速度。

    评  分  依  据

    分 值

    评分成绩

    1、学习态度认真、遵守纪律

    10

     

    2、设计分析合理性

    10

     

    3、设计方案正确性、可行性

    20

     

    4、设计结果正确性

    30

     

    5、设计报告的规范性

    10

     

    6、实践环节的独立性与主动性

    10

     

    7、设计验收

    10

     

    总 分

    100分

     

       

    最终评定等级为:

                              指导老师签字:               

     

                                                   年    月    日

     

    展开全文
  • 使用自定义HTML标签来进行网页设计

    千次阅读 2020-02-22 18:03:46
    如果能在自己的网页中使用自定义的标签是不是很酷呢,比如用你的网站的名称、用你的网名、用你所爱的人的名字来定义HTML标签并内嵌到网页中,本文就介绍一下这方面的内容。  本文以我的网站的拼音为例来自定义HTML...

    如果能在自己的网页中使用自定义的标签是不是很酷呢,比如用你的网站的名称、用你的网名、用你所爱的人的名字来定义HTML标签并内嵌到网页中,本文就介绍一下这方面的内容。

      本文以我的网站的拼音为例来自定义HTML标签。

      网站名称:网页教学网,域名缩写:webjx

      首先需要在<html>标签中进行这样的申明:<html xmlns:webjx>,xmlns即xml name space的缩写,是HTML标记的命名空间属性:一般其声明在元素开始标记的地方。只要在这里申明了我要使用的webjx这一自定义标签,语法分析器就会认识这个标签并赋予我定义的属性了。

      下面我们来定义一下这个标签所要使用的属性了,在<style></style>标签中加入下面的语句即:

    <style type="text/css"> 
    webjx\:my{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} 
    </style>

      上面这段代码自定义了<webjx:my></webjx:my>这个闭合标签的显示属性。\:是自定义标签前缀。

      当然,你还可以这样定义:

    <style type="text/css"> 
    webjx\:your{border:1px solid red;background-color: #FFF5F4;font-weight:bold;} 
    </style>

      它定义的是<webjx:your></webjx:your>闭合标签的样式属性。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

      完整的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns:webjx> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>使用自定义标签学习网页设计</title> 
    <style type="text/css"> 
    webjx\:my{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} 
    webjx\:your{border:1px solid red;background-color: #FFF5F4;font-weight:bold;} 
    </style> 
    </head> 
    <body> 
    <webjx:my>网页教学网欢迎您</webjx:my> 
    <webjx:your>请您记住网页教学网</webjx:your> 
    </body 
    </html>

    展开全文
  • 网页设计命名规范

    千次阅读 2017-06-06 23:14:09
    网页设计命名规范
    网页设计命名规范

    一.网站设计及基本框架结构:


    网页设计命名规范
    1.   Container
    “container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.
    2.   Header
    “header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
    3.   Navbar
    “navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
    4.   Menu
    “Menu”区域包含一般的链接和菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”.
    5.   Main
    “Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
    6.   Sidebar
    “Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
    7.   Footer

    “Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.


    二.需要注意的几点:
    1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
    如:red/left/big等。
    2.组合命名规则:
    [元素类型]-[元素作用/内容]
    如:搜索按钮: btn-search
    登录表单:form-login
    新闻列表:list-news
    3.涉及到交互行为的元素命名:
    凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
    鼠标悬停::hover   点击:click   已浏览:visited

    如:搜索按钮: btn-search、btn-search-hover、btn-search-visited


    三.Photoshop图层结构规范:
    Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。
    图层命名结构
     
    四.常用命名汇总:
    站点:site
    首页:homepage
    当前位置:currentPath
    二级页面/子页面:subpage
    布局:layout
    搜索:search
    网页头部:head/header
    登录条:loginbar
    标志:logo
    侧栏:side/sidebar
    广告条:banner
    导航:nav
    主 导 航:mainNav
    顶 导 航:topNav
    子导航:subNav
    当前位置导航:crumb
    菜单:menu
    子菜单:subMenu
    菜单内容:menuContent
    子菜单内容:subMenuContent
    下拉:drop
    下拉菜单:dropMenu
    工具条:tool/toolbar
    表单:form
    栏目:column
    箭头:arr/arrow
    搜索:search
    搜索按钮:btn-search
    滚动条:scroll
    主题/外观:theme
    页面主体:main
    页面中部:mainBody
    内容:content
    标签页:tab
    文章列表:list
    标签内容:tagContent
    当前标签:tagCurrent/currentTag
    提示信息:msg
    转角/圆角:cor/corner
    特别的:spec
    资源:source
    加入:joinus
    小技巧:tips
    栏目标题:title
    链接:links
    页脚:footer
    服务:service
    指南:guild
    热点:hot
    新闻:news
    下载:download
    注册:regsiter
    状态:status
    按钮:btn
    注 释:note
    投票:vote
    合作伙伴:partner
    友情链接:friendlink
    关于我们:aboutus
    提交:submit
    搜索框:searchbox
    文本框:textbox
    网页底部:foot/footer
    版权:copyright
    网站地图: sitemap
    列 定 义:column_1of3 (三列中的第一列)
    column_2of3 (三列中的第二列)
    column_3of3 (三列中的第三列)

    分类命名
    id的命名:
    (1)页面结构
      容器: container  页头:header  内容:content/container
      页面主体:main  页尾:footer  导航:nav
      侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
      左右中:left right center
    (2)导航
      导航:nav  主导航:mainbav  子导航:subnav
      顶导航:topnav  边导航:sidebar  左导航:leftsidebar
      右导航:rightsidebar  菜单:menu  子菜单:submenu
      标题: title  摘要: summary
    (3)功能
      标志:logo  广告:banner  登陆:login  登录条:loginbar
      注册:regsiter  搜索:search  功能区:shop
      标题:title  加入:joinus  状态:status  按钮:btn
      滚动:scroll  标签页:tab  文章列表:list  提示信息:msg
      当前的: current  小技巧:tips  图标: icon  注释:note
      指南:guild 服务:service  热点:hot  新闻:news
      下载:download  投票:vote  合作伙伴:partner
      友情链接:link  版权:copyright
     
    class的命名:
    (1)颜色:使用颜色的名称或者16进制代码,如
      .red { color: red; }
      .f60 { color: #f60; }
      .ff8600 { color: #ff8600; }
    (2)字体大小,直接使用’font+字体大小’作为名称,如
      .font12px { font-size: 12px; }
      .font9pt {font-size: 9pt; }
    (3)对齐样式,使用对齐目标的英文名称,如
      .left { float:left; }
      .bottom { float:bottom; }
    (4)标题栏样式,使用’类别+功能’的方式命名,如
      .barnews { }
      .barproduct { }
    注意事项:
      1.一律小写;
      2.尽量用英文;
      3.不加中杠和下划线;
      4.尽量不缩写,除非一看就明白的单词.
      主要的 master.css  模块 module.css  基本共用 base.css
      布局,版面 layout.css  主题 themes.css  专栏 columns.css
      文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css
           统计:count


    以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav   规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
    一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
    f-blue:表示蓝色字体样式
    f-blod:表示粗体字体样式
    对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
    n-title:新闻标题
    n-list:新闻列表
     
     
    五、CSS文件及样式命名
    1、CSS文件命名规范
    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;
    2、CSS样式命名规范
    本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:
    头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
    下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了。)
    展开全文
  • HTML静态网页设计

    万次阅读 多人点赞 2018-05-13 22:03:39
    第一周:HTML写静态网页1.HTML理论介绍及常用格式(1).HTML主体格式&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title...
  • PAGE PAGE 30 HTML的简单规则 HTML的构成要素 要素以段落式形成内容要素则由标签表现 开始标签 结束标签 要素如要素为H1要素内容为给网页插上CSS的翅膀 属性值 HTML的基本结构 标签 使用head标签设定网页 给文本注...
  • 网页设计\网页制作常用软件大全

    千次阅读 多人点赞 2014-03-04 12:08:26
    网页设计\网页制作常用软件 一、专业的网页设计、网页制作软件: 1、CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图、设计及图像,出色地设计公司标志、简报、彩页、...
  • 超文本标记语言(英文:HyperText Markup Language,HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。 1.1 什么是浏览器 解释和执行HTML源码的工具。 五大浏览器:Internet Explorer ...
  • 网页设计与制作项目

    千次阅读 2019-03-15 17:10:11
    网页设计与制作项目 一、 什么是网页?什么是网站? 网页:web页 实际上是HTML文件,是一种可以在WWW网上传输,并能被浏览器认识和翻译成页面的文件 HTML是“Hyper Text Markup Language”的缩写称为“超文本标记...
  • 网页设计三剑客(总结)

    千次阅读 2015-07-27 00:55:39
    工欲善其事必先利其器,想从事网页设计(现在已延伸为前端工程师)那么精通它所需要的技术就是必然的。 网页设计的三剑客指的是:HTML、CSS、JavaScript,现在一一讲述如下: 1.HTML---网页的基本结构 如果把网页...
  • 机动战士高达静态网页制作应用知识点...技术及样式方面,网页整体宽度1200PX,使用CSS设置了与选题相符的 酷炫网页背景图片,使用JS制作了顶部图片轮播,使用VIDEO标签插入了视频,作品完整,代码简单。 首页部分代码 &
  • WEB入门一 网页设计基础

    千次阅读 多人点赞 2017-02-14 13:50:58
    本章简介 在当今社会,网页是网络信息共享和发布的主要形式。而HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签...
  • 它有一套语法规则,通过这些语法规则,就可以设计出丰富多彩的网页了。 首先,html的标签格式为: <标签名>标签内容</标签名> 以<标签名>开头,以</标签名>结尾。 还有亿点要说明,HTML...
  • 了解网站开发的基本流程和相关知识 了解Dreamweaver...HTML标签是由尖括号括起来的关键词绝大多数HTML标签都是成对出现的包含首标签和尾标签首标签的格式为<标签名>尾标签的格式标签名>首标签和尾标签的中间为元素
  • 简单的网页设计(HTML篇1)

    万次阅读 多人点赞 2019-07-15 13:18:30
    简单的网页设计(HTML篇1) 本节成型网页框架: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给新月的一封回信</title> </head&...
  • HTML网页设计:四、超链接

    千次阅读 多人点赞 2021-03-21 13:19:05
    HTML系列文章目录 HTML网页设计:一、HTML的基本结构 HTML网页设计:二、网页的基本标签 HTML网页设计:三、图像标签标签 HTML网页设计:四、超链接 HTML网页设计:五、行内元素和块元素 HTML网页设计:六、列表 ...
  • HTML(网页设计)基础到加强

    千次阅读 2015-09-19 20:47:08
    每天都在上网,对于网页设计我们必须要了解一些,想知道如何点击一个连接就能跳转到其他的页面吗?想知道如何点击这里,该页面的其他的界面会变化吗?为什么图片能移动吗?这些都是网页设计,让我们一起学习!!
  • 网页设计期末复习 选择+简答+大题

    千次阅读 多人点赞 2021-01-05 17:31:22
    选填-----------------------------------------------------------选填 1 色彩的4种角色 2 网页中使用的视觉元素 3 色彩的抖动 4 色彩搭配的原理 ...7 域名的一些概念,包括域名的作用 ...15动态网页与静态网页的区别 pp
  • 作业_HTML标记基本应用与网页设计

    千次阅读 2018-04-12 10:19:18
    实验一 HTML标记基本应用与网页设计 一、实验目的 1.掌握Sublime Text 3或者editplus的安装与使用 2.掌握HTML常用标记的使用。 二、实习题目 运用所学知识,完成课本的练习与实验中的以下实验内容: 1.第2章...
  • 协议:事先约定或定义的一组精确地...标记型网页制作工具:是指创建的网页文件在编辑过程中只能看到页面的源代码,而需要转到浏览器中才能够看到页面的效果。要求用户对HTML的使用方法非常熟悉才能够做出希望要的...
  • 网页设计之CSS3精要

    千次阅读 2013-08-19 22:14:01
    如果你希望能成为一Web网页设计师,那么,掌握CSS技术的水平如何十分关键。  2 程序员需要掌握CSS吗? 我可以很肯定地说,程序员当然需要掌握CSS,只不过要求没有Web网页设计师那么高罢了,为什么这么说? 当前在...
  • 干货!Web 网页设计规范

    千次阅读 多人点赞 2020-04-21 14:20:46
    布局的不一致,使得可设计的空间也不相同。 1、左右布局 灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整; 右侧为内容版块范围,是网站内容的展示区域。 ...
  • 这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法。它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题,也希望对你有所帮助~ 当然如果会Selenium基于自动化测试爬虫、...
  • 实验一 简单静态网页设计

    千次阅读 2019-04-26 14:16:46
    根据提供的素材设计在线调查问卷。 实验要求: 熟练掌握使用记事本进行简单网页编辑的方法。 能够区分不同表单元素的应用场景。 掌握表单与表单元素的元素和属性对。 实验学时:4学时 实验步骤: 实验...
  • 我们平时上网浏览的所有页面,就是网页,而一个网站是由网页组成,小到一个网页,大到50个网页,而某些大型的网站可能包含了上千万个网页,打开网站的第一个页面叫做首页。 专有名词:网页,网站,主页...
  • 网页基本的构造都会,想要让网页漂亮起来吗?这里会让您有不一样的体验
  • 新闻发布系统,网页设计,我们也行

    千次阅读 热门讨论 2015-04-26 15:39:24
    开始了B/S的学习,开始了浏览器前台网页的制作,开始了一段新的征程。 我们都浏览过各种网页,领略过... 网页设计,有两种方法:一种是表格,一种是div+css。牛腩视频中教我们用的是后者,这也是有一定原因的。
  • web标签页,web网页的图标设置

    千次阅读 2016-01-22 18:57:15
    首先我们需要一张图片而这张图片格式是:favicon.ico,后缀为ico 把图片放到网站的网页上 代码怎么实现,小伙伴肯定关心这个. 解决问题 图片问题,我们需要一个可以将普通图片格式转化为.ico格式,那么就有在线和离线两...
  • 什么叫静态网页设计? 所谓静态网页就是说网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容,如果你内容变化就必须修改原代码...
  • HTML网页设计基础笔记 • 【第1章 HTML5基础】

    万次阅读 多人点赞 2020-03-19 13:42:47
    1.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互联网 1.1.5 网页开发工具 1.2 HTML5 标签 1.2.1 HTML5 标签概述 1.2.2 doctype 标签 1.2.3 html标签 1.2.4 head 标签 1.2.5 meta 标签 1.2.6 t...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,036
精华内容 30,814
关键字:

网页设计的标签名格式