• 本教程系统完整的讲解了HTML和CSS设计网页的基础知识,适合刚进入Web开发的新手学习。 教程借助大量代码实例来理解掌握各种语法,讲解思路清晰、言简意赅,精心制作的讲义一目了然。 教程分10章,共30集,385分钟...

    本教程系统完整的讲解了HTML和CSS设计网页的基础知识,适合刚进入Web开发的新手学习。

    教程借助大量代码实例来理解掌握各种语法,讲解思路清晰、言简意赅,精心制作的讲义一目了然。

    教程分10章,共30集,385分钟,欢迎收看。如有疑问或意见建议,请加我QQ:167347309沟通交流。

    更多课程信息,请参阅魏曦课堂官网:http://www.weixistyle.com

    1. 课程安排

    1.1 课程安排(12分16秒) 在线观看

    2. HTML

    2.1 网页基本概念和基本框架(16分35秒) 在线观看

    2.2 初识HTML标签(14分1秒) 在线观看

    3. CSS

    3.1 层叠样式表(13分48秒) 在线观看

    3.2 CSS选择器和样式声明(10分21秒) 在线观看

    3.3 颜色属性值(8分29秒) 在线观看

    4. HTML+CSS进阶

    4.1 HTML标签的全局属性(10分56秒) 在线观看

    4.2 类选择器和ID选择器(13分58秒) 在线观看

    4.3 HTML标签分类介绍(10分55秒) 在线观看

    5. 链接

    5.1 链接的本质和案例准备(14分26秒) 在线观看

    5.2 链接的实现(16分23秒) 在线观看

    5.3 链接的选择器和样式(11分36秒) 在线观看

    5.4 外部样式表和图片标签(12分8秒) 在线观看

    6. 盒子模型

    6.1 盒子模型概述(13分47秒) 在线观看

    6.2 开发者工具(13分35秒) 在线观看

    6.3 CSS的层叠次序(12分40秒) 在线观看

    6.4 盒子模型的设置(16分53秒) 在线观看

    7. 定位和浮动

    7.1 块级元素和行内元素(13分52秒) 在线观看

    7.2 定位(11分24秒) 在线观看

    7.3 定位(续)(12分59秒) 在线观看

    7.4 浮动(14分19秒) 在线观看

    7.5 浮动清除(10分53秒) 在线观看

    8. 实战演练

    8.1 实战演练(1)(13分30秒) 在线观看

    8.2 实战演练(2)(10分45秒) 在线观看

    8.3 实战演练(3)(9分30秒) 在线观看

    8.4 实战演练(4)(15分15秒) 在线观看

    8.5 实战演练(5)(11分53秒) 在线观看

    9. 表单

    9.1 表单(10分34秒) 在线观看

    9.2 表单(续)(11分17秒) 在线观看

    10. HTML5和CSS3简介

    10.1 HTML5和CSS3简介(15分39秒) 在线观看

    展开全文
  • 本套教程(swf格式)主要针对0基础的学员,主要讲解了html常用标签的使用、表单表格列表的使用、单选复选下拉选项的制作css盒子模型、行内标签和块级元素的区别、浮动和定位的使用、css优先级及权重的计算等。...
  • 用div+css制作网页界面

    2013-04-26 23:12:54
    用div+css制作网页界面  这次我的任务是制作百度界面,之前我已经做过一个基本一样的百度,但是用的是纯标签,这种方法比较简单,也不太适合比较复杂的界面或不能精确制作。所以,这次我用div+css精确地制作了一个...
    用div+css制作网页界面
       这次我的任务是制作百度界面,之前我已经做过一个基本一样的百度,但是用的是纯<p>标签,这种方法比较简单,也不太适合比较复杂的界面或不能精确制作。所以,这次我用div+css精确地制作了一个百度界面,这种方法是做网页前台必要的,必须得了解。这次通过几位学长的指导,感觉受益颇多,所以记录下来。因为前一篇博客我写过制作网页的一些基础知识,所以这次,我就不一一介绍,若你想了解一下我之前的介绍的基础知识点,可以在进去看看http://blog.csdn.netu010010102/article/details/8801434,这次写博客目的是将知识点再升华点高度。
       之前的任务,我用的是<p>标签,完成整个项目的,但是,<p>标签并不能精确定义位置及字体大小颜色等功能,所以这次我改用<div>标签解决这个问题,并且结合CSS对文字及位置等进行准确定义。
         这次我就不一一介绍每一行的语法及作用,我主要介绍一些我在做任务时认为的比较重要的知识点,各位若有不解之处,欢迎各位提出,我定将竭力帮你解决。谢谢!!!
       以下是我总结知识点:
    1、每一个<div>标签都得定义一个name、id或class,以备修改或调用。调用之后就用CSS进行各种设置;
      例:<div id="one">这里是你要添加在这个标签里的内容</div>
         #one{
    font-size:12px;
    color:#0000FF;
    text-align:right;
    }
    (注:整个项目可以先用html将整个界面大概做出,之后便可以将所有CSS放置在一起,这样以便以后的修改。但是,所有的标签都必须放在样式标签中,即:<style type="text/css">你要写的CSS内容</style>)  
       
    2、<div id="one">
    <ul>
    <li>注册</li>
    <li>登入</li>
    <li>|</li>
    <li>搜索设置</li>
    </ul>
    </div>
    这是其中一个id="one"的<div>标签里的内容,只是用<li>时,每小块内容会分行显示,加入<ul>标签之后就不会了
    #one li{
    float:right;
    margin-right:5px;
    }
    这是其对应的css设置,注意此比一般的<div>标签多了一个“li”,大括号里的设置格式还是同<div>标签一样的。另外,由于引用了“float”,所以其中的<div>内添加的内容会倒置,所以记得将所有内容反过来写。(就像此处在用浏览器打开后的结果顺序是“搜索设置、登入、注册”)

    3、<a href="http://tieba.baidu.com/index.html">贴吧</a>
    这是一个链接的示例,链接的标签为<a>其中的语法表示为<a href="这里是你要链接的网址">贴吧</a>,用浏览器打开后,单击“贴吧”后,这个网页就会跳转到贴吧的网站。

    4、其实网页上显示出来的内容可以不用标签包含来使用,完全可以单独裸露的写,只是用标签包含后易于CSS管理。

    例:<a href="http://e.baidu.com/?refer=888">加入百度推广</a>
    |
    <a href="http://top.baidu.com/">搜索风云榜</a>
    |
    <a href="http://home.baidu.com/">关于百度</a>
    |
    <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About 
    其中的三个符号就没有用标签包含,而是直接使用。

    5、一些基础的CSS设置:
    (1)color:#0000FF;这是颜色的定义,其中“0000FF”是指蓝色,这是蓝色的代码,可以百度参考“css颜色代码表”查询,也可以直接将“0000FF”用蓝色代替。
    (2)text-align:center;此行文本内容居中显示
    (3)line-height:25px;上下两行间间距为25像素。
    (4)font-size:10px;字体设置为10个像素。
    (5)outline:none;这里指的是输入文本框当单击时不会出现边界线。
    (6)margin-top:4px;指与上一行间的间距为4个像素。
    (7)text-decoration:underline;这里是设置下划线。
    (8)float:right;将<ul>标签内所有<li>标签里的内容放置于此行右边。

    6、由于我是用NOTEPAD++软件写的代码,在我编写完代码时,打开时出现乱码情况,这时,你可以在NOTEPAD++菜单栏中设置代码的格式,就可以解决问题。

    我总结的知识点这次就是这些,以下就是我这次做的项目代码。结合上面的知识点,应该可以看懂,不懂的话,欢迎提出!!!

    <html>
    <head>
    <title>百度一下,你就知道</title>
    </head>
    <body>
    <div id="one">
    <ul>
    <li>注册</li>
    <li>登入</li>
    <li>|</li>
    <li>搜索设置</li>
    </ul>
    </div>
    <div id="content">
    <div id="two">
    <img src="2.gif">
    </div>
    <div id="three">
    <a href="http://news.baidu.com/">新闻</a>
    <span id="g">
    <b>网页</b>
    </span>
    <a href="http://tieba.baidu.com/index.html">贴吧</a>
    <a href="http://zhidao.baidu.com/">知道</a>
    <a href="http://music.baidu.com/">音乐</a>
    <a href="http://image.baidu.com/">图片</a>
    <a href="http://video.baidu.com/">视频</a>
    <a href="http://map.baidu.com/">地图</a>
    </div>
    <div id="four">
    <span class="s_ipt_wr">
      <input type="text" maxlength="100" style="width:405px;height:32px;" 


    autocomplete="off">
    </span> 
    <span class="s_btn_wr">
      <input type="submit" value="百度一下" class="s_btn" 


    style="width:100px;height:36px;"οnmοusedοwn="this.className='s_btn s_btn_h'" 


    οnmοuseοut="this.className='s_btn'">
    </span>
    </div>
    <div id="five">
    <a href="http://www.baike.baidu.com/">百科</a>
    <a href="http://www.wenku.baidu.com/">文库</a>
    <a href="http://www.hao123.com/">hao123</a>
    |
    <a href="http://www.baidu.com/more/">更多>></a>
    </div>
    <div id="six">
    <a href="http://zhidao.baidu.com/topic/yaan/">支持雅安,寻找每一个生命奇迹</a>
    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="sever">
    <div>
    <span id="e">
    <a href="http://www.baidu.com/cache/sethelp/index.html">把百度设为主页</a>
    </span>
    <span id="f">
    <a href="http://liulanqi.baidu.com/?t=baidu">安装百度浏览器</a>
    </span>
    </div>
    <div>
    <a href="http://e.baidu.com/?refer=888">加入百度推广</a>
    |
    <a href="http://top.baidu.com/">搜索风云榜</a>
    |
    <a href="http://home.baidu.com/">关于百度</a>
    |
    <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About 


    Baidu</a>
    </div>
    <div>
    <a href="http://www.baidu.com/duty/">@2013 Baidu使用百度前必读 京ICP证030173号


    <img src="1.gif"></a>
    </div>
    </div>
    </body>
    </html>
    <style type="text/css">
    a{
    color:blue;
    text-decoration:underline;
    }
    #one{
    font-size:12px;
    color:#0000FF;
    text-align:right;
    }
    #one li{
    float:right;
    margin-right:5px;
    }
    #two{text-align:center;
    }
    #three{
    font-size:14px;
    color:#0000FF;
    text-align:center;
    letter-spacing:3px;
    margin-left:-90px;
    }
    #four{
    text-align:center;
    margin-top:4px;
    }
    #four input{
    outline:none;
    }
    #five{
    font-size:14px;
    color:#0000FF;
    text-align:center;
    line-height:80px;
    }
    #six{
    font-size:10px;
    color:#0000FF;
    line-height:30px;
    text-align:center;
    }
    #sever{
    color:#0000FF;
    text-align:center;
    line-height:25px;
    font-size:10px;
    }
    #g{
    color:#000000;
    }
    #content{
    width:1024px;
    height:350px;
    margin:0 auto;
    }
    </style>


    这是完成后的效果图:




    大家可以参考着研究一下,由于我也是新手,所以其中若有不当之处,敬请包含,谢谢!!!































    展开全文
  • 刚学完HTML+CSS,一定要按照自己的想法去制作网页,虽然没有交互,但是可以对前面的知识有一个很大的重用,你的知识框架会更加完美。css基础html是勾勒,css是染色,基础的css学完你会有种想写页面的冲动,这时候你...

    刚学完HTML+CSS,一定要按照自己的想法去制作网页,虽然没有交互,但是可以对前面的知识有一个很大的重用,你的知识框架会更加完美。css基础html是勾勒,css是染色,基础的css学完你会有种想写页面的冲动,这时候你不用抑制住那种感觉(我就没压住哈哈),直接按照自己所想开写,这是你的第一个项目,从期末就一直想学Web前端设计,现在刚放假4天,自己也是真真正正的看了4天慕课,大体过了一遍HTML,CSS,我想我是不是也可以画一些东西了?尝试一下总比没有好,踏出第一步虽然很菜!

    因为喜欢长跑,喜欢基普乔格和贝克勒,也很想买Nike Next%和佳明,但是没有钱啊,我没有钱。
    在这里插入图片描述
    就只能用另一种形式去假装拥有Nike Next%和佳明了——设计一个全都是Nike Next%和佳明基普乔格和贝克勒的小网页

    在这里插入图片描述


    下面是具体的展示:
    在这里插入图片描述
    这个视频有广告还是先看代码吧:

    纯HTML+CSS无交互静态网页展示(菜鸡)

    开始拥有Next%和佳明之旅:

    0. 寻找素材
    在所有的所有开始之前,我们要先找到自己的方向,自己想做什么,要实现什么功能,需要什么资源,什么素材(哈哈我这个就不用想了,我只想假装拥有Next%和佳明)。在Baidu上找了一些图片:
    在这里插入图片描述
    1. 设计框架
    在正式开始是制作之前,我们要有一个总的框架,在这个框架上去设计样式,额,用什么去设计框架呢?啊,电脑上没有绘图软件,又不想去下载,只能用Excel画框架了.
    (1)首先要有一个总的区域container在这个总的区域里设置子区域.
    (2)接着要有一个导航栏nav,设置在最顶部,横占整个区域.
    (3)再往下就是两侧的菜单,aside1和aside2,aside里面又分为三个小区域,用来展示内容
    (4)中间就是主体部分main,main由多个相同的cbox组成,第一个cbox里面设置动画,接下来的cbox用来展示商品.
    (5)在区域的底部设置一个页脚footer,展示温馨提示或者作者信息.
    在这里插入图片描述
    画了一个框架,感觉还不错,将就着用吧。这个框架大概就是按照CSDN的主页来设计的,完全按照自己看到的,导航栏,两面的菜单,中间是具体的内容。嗯,感觉还不错.

    2. 有了框架,开始搭HTML
    每一个区域都是一个盒子,每个盒子可以设置样式。一个大盒子里面浮动或者定位几个小盒子,小盒子里面设置具体内容。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Web run</title>
    	<link rel="stylesheet" type="text/css"href="CSS/Web run.css">
    </head>
    <body>
    	<div id="container">
    		<div id="nav">
    
    			<div id="name"><p>Hello! One of three_tigers</p></div>
    			<div id="search">
    				<div id="dd1">
    					search
    					<input type="text"/>
    				</div>
    				<div id="dd2">
    					<img src="images/run/search.png" width="40" height="35">
    				</div>
    			</div>
    			<div id="setting">
    				<p>setting</p>
    				<div>
    				<img src="images/run/nav4.png" width="35" height="35">
    				</div>			
    			</div>
    			<div id="theme"><p>theme</p>
    			<div>
    				<img src="images/run/theme.png" width="40" height="35">
    				</div>	
    			</div>
    		</div>
    
    		<div id="aside1">
    			<div class="box">
    				<div class="abox"><img src="images/run/Kipchoge2.png" width="360" height="255"></div>
    				<div class="bbox"><h2>埃鲁德·基普乔格,肯尼亚马拉松运动员,自从19岁在2003年的世界田径锦标赛赛上获得5000米的金牌之后,就成为了国际田坛一颗耀眼的明星。肯尼亚全国上下欢腾鼓舞,很快奈洛比市就有一条街道以他的名字命名,用来纪念这次伟大的胜利。</h2></div>
    			</div>
    			<div class="box">
    				<div class="abox"><img src="images/run/Kipchoge1.png" width="360" height="255"></div>
    				<div class="bbox"><h2>2018年9月16日,在柏林马拉松上基普乔格以2小时01分39秒夺冠并创造了新的马拉松世界纪录 [1]  ;12月,被新华社体育部评为2018年国际十佳运动员。</h2></div>	
    			</div>
    			<div class="box">
    				<div class="abox"><img src="images/run/Kipchoge3.png" width="360" height="255"></div>
    				<div class="bbox"><h2>2019年10月12日,在奥地利首都维也纳的“Ineos 1:59”的挑战中以1小时59分40秒的成绩顺利完赛,就此成为全球第一位马拉松跑进两小时大关的选手。</h2></div>				
    			</div>
    		</div>
    		<div id="main">
    			<div class="cbox">
    				<div id="fbox"></div>
    			</div>
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/Next%1.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes.	Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. </div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    			</div>
    			</div>
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/Next%3.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes.	Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. 
    					</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    			</div>
    			</div>
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/佳明2.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>			
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/佳明1.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/Next%1.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes.	Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. 
    					</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>
    			<div class="cbox">
    				<div class="pbox" width="450" height="250"><img src="images/run/佳明3.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>			
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/Next%2.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes.	Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. 
    					</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>
    			<div class="cbox">
    				<div class="pbox"><img src="images/run/Nike1.png" width="450" height="250"></div>
    				<div class="ebox">
    					<div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div>
    					<div class="price"><a href="#">$600 Buy it now!</a></div>
    				</div>
    			</div>
    		</div>
    		<div id="aside2">
    			<div class="box">
    				<div class="abox"><img src="images/run/贝克勒1.png" width="360" height="255"></div>
    				<div class="bbox"><h2>埃塞俄比亚长跑运动员,拥有世界纪录和奥运会纪录。在5000米和10000米,他是这两个赛事的奥运卫冕冠军,2004年雅典奥运会10000米冠军,2008年北京奥运会5000米和10000米金牌。</h2></div>				
    			</div>
    			<div class="box">
    				<div class="abox"><img src="images/run/贝克勒2.png" width="360" height="255"></div>
    				<div class="bbox"><h2>凯内尼萨·贝克勒,在田径届被称为万米之王,他的技术动作富有弹性,频率相当快,往往能最后一圈进行决胜,在国际赛场9年的万米比赛中尚未尝过败绩,无愧于万米之王称号。</h2></div>				
    			</div>
    			<div class="box">
    				<div class="abox"><img src="images/run/贝克勒3.png" width="360" height="255"></div>
    				<div class="bbox"><h2>2004年雅典奥运会,10000米金牌、5000米银牌。
    2008年北京奥运会,5000米金牌、10000米金牌。
    共取得金牌3枚,银牌1枚。</h2></div>				
    			</div>
    		</div>
    		<div id="footer"> 
    			<div id="maker">Made by One of thre_tigers</div>			<div id="goback"><a href="#">Go back to top</a></div>
    			<div id="service">
    				<div><p>Sevice</p></div>
    				<div><img src="images/run/phone.png " width="40" height="40"></div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    

    这个过程就是对着自己的“框架”翻译一遍结构,乖乖用div累起来就ok啦.

    3. 用CSS设置样式
    把结构设置好之后,就是给每一个区域设置样式了,这也是最关键的一步,在这里我要设置的样式主要是:
    (1)导航栏nav里面的图标: 边框有透明以及圆角效果,一个搜索框,鼠标悬浮放大的效果,以及旁边的阴影。
    (2) 两侧菜单aside**: 图片边框透明,阴影,圆角,鼠标悬浮能够翻转这个区域,展示图片背面的人物介绍
    (3)主体部分的mian:
    第一个cbox中间边框有圆角,阴影效果,同时在中间播放动画。接下来的cbox分为两个部分,分别展示商品图片和商品介绍,也是边框有透明以及圆角效果,右侧有一个价格框,显示价格填入超链接。同时鼠标悬浮有放大,阴影的效果。
    (4)页脚footer : 里面的图标,边框有透明以及圆角效果,鼠标悬浮放大的效果,以及旁边的阴影。

    下面看具体实现:
    1. 导航栏nav:
    要实现的样式:导航栏nav里面的4图标区域(name search setting theme),边框有透明以及圆角效果,一个搜索框,鼠标悬浮放大的效果,以及旁边的阴影。

    #nav{
    	background-color: #484891;
    	width: 1500px;
    	height: 50px;
    	border: 1px solid white;
    	position: fixed;
    	z-index: 999;
    }
    
    #name{
    	width: 350px;
    	height: 40px;
    	color: white;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    }
    #name:hover{
    transform: scale(1.3);
    box-shadow: 0px 0px 10px white;
    }
    
    #search{
    	width: 430px;
    	height: 40px;
    	color: white;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    }
    
    
    #search div{
    margin-left: 10px;
    margin-right: 5px;
    }
    
    #dd1{
    	margin-top: 0px;
    	float: left;
    }
    #dd2{
    	margin-top:5px;
    	float: left;
    }
    
    #search:hover{
    	transform: scale(1.3);
    	box-shadow: 0px 0px 10px white;
    }
    
    #setting{
    	width: 220px;
    	height: 40px;
    	color: white;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    }
    #setting p{
    	display: inline;
    }
    
    #setting div{
    	width: 35px;
    	height: 30px;
    	float: right;
    	margin-right:30px;
    	border: 1px solid #484891; 
    	margin-top: 2px;
    }
    
    #setting:hover{
    	transform: scale(1.3);
    	box-shadow: 0px 0px 10px white;
    }
    #theme{
    	width: 220px;
    	height: 40px;
    	color: white;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 50px;
    }
    #theme p{
    	display: inline;
    }
    
    #theme div{
    	width: 35px;
    	height: 30px;
    	float: right;
    	margin-right:30px;
    	border: 1px solid #484891; 
    	margin-top: 2px;
    }
    
    #theme:hover{
    	transform: scale(1.3);
    	box-shadow: 0px 0px 10px white;
    }
    

    几个要注意的地方:
    (1)鼠标悬停时放大:transform: scale(1.3);
    (2)阴影的设置用:box-shadow: 0px 0px 10px white;
    (3)在设置text+div的区域时,如果把文本用< p >标签设置,那么他默认的是block类型的,会占据一行,所以装照片的div会展示在下一行,这个时候可以将< p >标签转化成inline类型:
    #theme p{display: inline;}
    (4)搜索框:左侧文字用< p >标签包络,中间设置一个文本框< input type=“text” />,右侧用一个div区域

    2. 两侧的图片菜单:
    实现功能:两侧菜单aside图片边框透明,阴影,圆角,鼠标悬浮能够翻转这个区域,展示图片背面的人物介绍

    #aside1{
    	background-color: #484891;
    	width: 375px;
    	height: 800px;
    	border:1px solid white;
    	float:left;
    	position: fixed;
    	left:0px;
    	top: 55px;
    	overflow: hidden;
    	border-radius: 10px;
    }
    
    #aside2{
    	background-color: #484891;
    	width: 375px;
    	height: 800px;
    	border:1px solid white;
    	float:left;
    	position: fixed;
    	left:1120px;
    	top: 55px;
    	overflow: hidden;
    	border-radius: 10px;
    }
    .box{
    	width: 360px;
    	height: 255px;
    	border:1px solid white;
    	margin: 6px auto;
    	transform-style: preserve-3d;
    	transition: 1s;
    	border-radius: 10px;
    	line-height: 40px;
    }
    .box:hover{
    	transform: rotateY(180deg);
    	box-shadow: 0px 0px 10px white;
    }
    .abox{
    	width: 360px;
    	height: 255px;
    	border:1px solid #336666;
    	position: absolute;
    	overflow: hidden;
    	border-radius: 10px;
    }
    .bbox{
    	background-color:#080000;
    	width: 360px;
    	height: 255px;
    	border:1px solid #336666;
    	transform: rotateY(180deg);
    	overflow: hidden;
    	border-radius: 10px;
    }
    .bbox h2{
    	text-align: center;
    	font-size: 15px;
    	text-align: center;
    	color: 	#808000;
    }
    

    这里要实现的主要是一个鼠标悬停翻转的功能,我们可以这样来设置:
    (1)对展示区域box设置两个和box等大的子区域abox和bbox分别表示正面和背面,abox设置图片,bbox设置人物介绍.
    (2)将box区域先沿着Y轴旋转180deg.
    (3)将abox的position设置为absolute,这样abox就会脱离文档流,不会占据空间而bbox就会填补上去,实现a在b的表层.
    (4)鼠标悬停的时候将box反转过来就可以看到背面bbox了.

    3.main中心区域:
    (1)第一个cbox中间边框有圆角,阴影效果,同时在中间播放动画。
    动画的设置主要使用@keyframes规则:

    @keyframes frames{
    	0% {background:  url("../images/run/freedom.png")  repeat; }
    	20% {background:  url("../images/run/keep.png")  repeat; }
    	40% {background:  url("../images/run/keep1.png")  repeat; }
    	60% {background:  url("../images/run/Nike logo.png")  repeat; }
    	80% {background:  url("../images/run/亚瑟士logo.png")  repeat; }
    	100% {background:  url("../images/run/佳明logo.png")  repeat; }
    }
    

    将图片设置好,然后在中心的fbox里使用:

    #fbox{
    	width: 710px;
    	height: 250px;
    	border:1px solid white;	
    	box-shadow: 3px 3px 5px white;
    	margin: 2px auto;
    	border-radius: 10px;
    	animation: frames 50s linear;
    }
    

    (2)接下来的cbox分为两个部分,分别展示商品图片和商品介绍,也是边框有透明以及圆角效果,右侧有一个价格框,显示价格填入超链接。同时鼠标悬浮有放大,阴影的效果。
    边框设置成圆角,看上去更加圆润,精致,使用border-radius设置:

    .pbox{
    	width: 450px;
    	height: 250px;
    	border:1px solid rgb(40 40 40);	
    	float:left;
    	margin-left: 5px;
    	margin-top: 4px;
    	border-radius: 10px;
    	overflow: hidden;
    }
    
    

    鼠标悬浮的时候将图标放大,然后让边框显示白色,加上阴影这个时候看上去就会有一种透明的效果:

    .pbox:hover{
    	transform: scale(1.1);
    	border:2px solid white;
    	border: 1px solid white;
    	box-shadow: 0px 0px 5px white;
    }
    

    下面是mian区域的代码:

    #main{
    	background-color:#282828;
    	width: 740px;
    	height: 2435px;
    	border:1px solid white;
    	position: absolute;
    	left:380px;
    	top: 55px;
    	z-index:0;
    }
    
    .cbox{
    	width: 730px;
    	height: 260px;
    	margin: 8px auto;
    	clear: both;
    }
    
    #fbox{
    	width: 710px;
    	height: 250px;
    	border:1px solid white;	
    	box-shadow: 3px 3px 5px white;
    	margin: 2px auto;
    	border-radius: 10px;
    	animation: frames 50s linear;
    }
    @keyframes frames{
    	0% {background:  url("../images/run/freedom.png")  repeat; }
    	20% {background:  url("../images/run/keep.png")  repeat; }
    	40% {background:  url("../images/run/keep1.png")  repeat; }
    	60% {background:  url("../images/run/Nike logo.png")  repeat; }
    	80% {background:  url("../images/run/亚瑟士logo.png")  repeat; }
    	100% {background:  url("../images/run/佳明logo.png")  repeat; }
    }
    .pbox{
    	width: 450px;
    	height: 250px;
    	border:1px solid rgb(40 40 40);	
    	float:left;
    	margin-left: 5px;
    	margin-top: 4px;
    	border-radius: 10px;
    	overflow: hidden;
    }
    .pbox:hover{
    	transform: scale(1.1);
    	border:2px solid white;
    	border: 1px solid white;
    	box-shadow: 0px 0px 5px white;
    }
    .ebox{
    	width: 250px;
    	height: 250px;
    	border:1px solid white;	
    	float:left;
    	margin-left: 12px;
    	margin-top: 4px;
    	border-radius: 8px;
    }
    
    .explain{
    	width: 240px;
    	height: 160px;
    	border:1px solid #5151A2;	
    	float:left;
    	margin-left: 3px;
    	margin-top: 4px;
    	background-color: #5151A2;
    	border-radius: 5px;
    	font-size: 16px;
    	line-height: 22px;
    	text-align:left;
    }
    .explain:hover{
    	transform: scale(1.1);
    	border:2px solid white;
    	color: white;
    	box-shadow: 0px 0px 10px white;
    }
    .price{
    	width: 240px;
    	height: 65px;
    	border:1px solid #5151A2;	
    	float:left;
    	margin-left: 3px;
    	margin-top: 8px;
    	background-color: #5151A2;
    	border-radius: 5px;
    	font-size: 22px;
    	text-align-last: center;
    	line-height: 65px;
    }
    .price:hover{
    	transform: scale(1.1);
    	border:2px solid white;
    	box-shadow: 0px 0px 10px white;
    }
    .preic a:link{
    		text-decoration: none;
    		color:#686868;/*未访问时*/
    }
    a:visited{
    	text-decoration: none;
    	color:#808000;/*已访问*/
    }
    a:hover{
    	font-size: 120%;
    	text-decoration: underline;
    	color:#03c;/*悬停*/
    	text-decoration: 
    	box-shadow: 0px 0px 10px white;
    }
    .price a:active{
    	text-decoration: none;
    	color:#00FA9A;/*点击时刻*/
    }
    

    4.最后就是页脚footer的设置了,和nav的设置基本一样

    页脚footer里面的图标,边框有透明以及圆角效果,鼠标悬浮放大的效果,以及旁边的阴影。

    #footer{
    width: 1500px;
    height: 50px;
    border: 1px solid white;
    position:absolute;
    top:2510px; 
    background-color: #484891;
    }
    
    #goback{
    	width: 350px;
    	height: 40px;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    
    }
    
    #goback:hover{
    	transform: scale(1.1);
    	box-shadow: 0px 0px 10px white;
    }
    #goback a{
    	color: white;
    	text-decoration: none;
    }
    #maker{
    	width: 350px;
    	height: 40px;
    	color: 	#808000;
    	text-align:center;
    	font-size: 18px;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    }
    
    #service{
    	width: 240px;
    	height: 40px;
    	color: white;
    	text-align:center;
    	font-size: 25px;
    	border: 1px solid white;
    	border-radius: 10px;
    	margin-top: 5px;
    	float: left;
    	margin-right: 70px;
    }
    #service div{
    	float:left;
    	width: 40px;
    	height: 30px;
    	margin-right: 60px;
    	margin-left: 20px;
    }
    #service:hover{
    	transform: scale(1.1);
    	box-shadow: 0px 0px 10px white;
    }
    

    值得注意的是这里设置了一个Go back to top返回顶部设置一个虚拟超链接#就能达到这个效果

    <div id="goback"><a href="#">Go back to top</a></div>
    

    最后小网页就基本完成啦,哈哈哈,虽然实现的功能很简单,很基础但是真的很有趣啊!
    在这里插入图片描述
    在这里插入图片描述
    源码地址

    展开全文
  • 教程名称:DIV CSS网页制作基础篇视频课程【83课】课程目录:【】网页制作(DIV CSS)基础篇-经典资料专题及项目素材【】网页制作(DIV CSS)基础篇(01-12课)【】网页制作(DIV CSS)基础篇(13-25课)【】网页...
  • CSS3规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。...本课程是《CSS3网页设计与制作》系列课程的12-18章内容,主要包含缓动、变形、动画、弹性盒、多列布局、响应式布局等知识点
  • CSS3规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。...本课程是《CSS3网页设计与制作》系列课程的6-11章内容,主要包含颜色特性、文本属性、盒模型、边框属性、背景属性等知识点
  • Web前端开发-网页制作零基础入门-Dreamweaver2019+HTML+CSS视频教程欢迎使用观看网页设计制作零基础入门教程主要内容导入 欢迎使用观看网页设计制作零基础入门教程 新开的课程,11月27日开课,这是链接...

    Web前端开发-网页制作零基础入门-Dreamweaver2019+HTML+CSS视频教程

    欢迎使用观看网页设计制作零基础入门教程

    新开的课程,11月27日开课,这是链接https://ke.qq.com/course/459861

    主要内容

    本课程从最基础入门开始,面向:零基础学员、网页设计师、web前端开发者;
    主要内容:
    域名、主机的购买和配置;
    Dreamweaver CC 2019最新版
    HTML+CSS+Javascript;
    本课程由零点网络推出,由王唯主讲,是Web前端入门课程,如果您觉得可以走开发这条路,可以继续学习零点教育的其它课程

    Web前端开发零基础入门教程

    导入

    感谢支持,第一次在使用CSDN的高级编辑器,非常好用,赞一个!

    展开全文
  • 教程名称:DIV CSS网页制作提高篇视频课程【17课】课程目录:【】网页制作(DIV CSS)提高篇01【】网页制作(DIV CSS)提高篇02【】网页制作(DIV CSS)提高篇03【】网页制作(DIV CSS)提高篇04【】网页制作(DIV ...
  • 网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多问题,先记录总结一下. ps:因为没有老师带,看的网课和W3C以及相关书籍,以下内容肯定有操作错误或描述不当的地方,希望各位...

    前言

    最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多问题,先记录总结一下.

    ps:因为没有老师带,看的网课和W3C以及相关书籍,以下内容肯定有操作错误或描述不当的地方,希望各位看到这篇文章的同学和前辈们能指出错误或者骂我,本人脸皮很厚,会接受并表示感谢.

    展示效果

    复仇者联盟4
    复仇者联盟4
    一首歌
    一首歌
    乡愁
    乡愁
    后妈茶话会
    后妈茶话会
    首页
    首页
    首页
    真爱至上
    真爱至上

    网页说明

    创作初衷

    突发奇想的想要弄一个英文经典分享的网页,假设我是用户我打开后可以观看视频,收听音频以及查看相应的字幕,是以一个可行的并能巩固所学HTML和CSS理论知识且有趣前提下所进行的.

    网页元素

    背景图片
    音频
    视频
    超链接
    logo以及一些字.

    网页布局

    在制作过程中我感觉最难的就是网页布局了,我用的是三行三列布局,但在写代码过程中网页布局是出问题最多的地方,例如三列的浮动问题,文本的对齐问题,以及像素问题.

    下面是创作网页时的一个小草稿
    网页草稿

    非常简单,我也是参考W3C和相关课本进行制作但问题该出还是出.

    相关代码

    以下是相关的代码,因为是个人敲的非常简单,肯定会有纰漏问题和行业规范问题希望大家能提出来我会认真改正,因为有一些课本上没有的知识如果不问我是永远不会知道的.

    html代码

    <!--经典分享2_首页-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>经典分享</title>
    	<link rel="stylesheet" type="text/css" href="../../css/经典分享2/经典分享2.css">
    </head>
    <body background="../../image/background/粉色.jpg">
    	<div id="header" class="">
    		<a href="经典分享2_首页.html">
    		<img src="../../image/logo/双A.jpg"  width="8%" height="60px" alt="">
    		<hr size="3px" width="100%" color="#FF7FED" ></a>
    
    	</div>
    	<div id="main" class="" >
    		<div class="main_left">
    			<div class="main_left_div" ><a href="经典分享2_首页.html" class="a">首页</a></div>
    			<div class="main_left_div"><a href="经典分享2_后妈茶话会.html" class="a">后妈茶话会</a></div>
    			<div class="main_left_div"><a href="经典分享2_真爱至上.html" class="a">真爱至上</a>
    			</div>
    			<div class="main_left_div"><a href="经典分享2_老爸老妈浪漫史.html" class="a">老爸老妈浪漫史</a></div>
    			<div class="main_left_div"><a href="经典分享2_楚门的世界.html" class="a">楚门的世界</a></div>
    			<div class="main_left_div"><a href="经典分享2_复仇者联盟4.html" class="a">复仇者联盟4</a></div>
    			<div class="main_left_div"><a href="经典分享2_乡愁.html" class="a">乡愁</a></div>
    			<div class="main_left_div" style="border-bottom: double;border-color: #FF7FED" ><a href="经典分享2_一首歌.html" class="a">一首歌</a></div>
    			
    
    		</div>
    		<div class="main_middle">
    			<video width="80%" height="95%" controls="controls">
    				<source src="../../视频/MP4/see you again.mp4" type="video/mp4">
    			</video>
    		</div>
    		<div class="main_right">
    			<div class="main_right_up">
    				<h1 class="header_h1"> 广告位招租 </h1>
    				
    			</div>
    			<hr size="3px" width="100%" color="#FF7FED" >
    			<div class="main_right_down">
    				<p class="p" ">欢迎来到经典英语片段分享</p>
    
    				<p class="p">这是一个非常简短的网站,左侧导航栏有8个小片段可以观看</p>
    				<p class="p">文字的上面是音频文件,如果想听的话可以点播放按钮</p>
    				<p class="p">当然还有相关的字幕</p>
    				<p class="p">ps:视频和音频并不一致,因为我找不到相关的视频 :( 
    				 </p>
    				 <p class="p">首页歌不用说了吧,本来想放Believer的 可是跟氛围有点不搭</p>
    				<a href="mailto:1254038128@qq.com?subject=Hello%20again"> 联系我 </a>
    			</div>
    
    			<hr size="3px" width="100%" color="#FF7FED" >
    		</div>
    	</div>
    
    	<div id="footer" class="">
    		<h1 class="header_h1" style="font-size: 100%"> 版权所有 </h1>
    	</div>
    </body>
    </html>
    

    CSS代码

    
    #header{
    	width: 100%;
    	height: 80px;
    	
    }
    #main{
    
    	width: 100%;
    	height: 500px;
    	
    }
    #footer{
    	width: 100%;
    	height: 20px;
    	
    }
    .header_h1{
    	font-size: 200%;
    	font-family: 黑体;
    	font-weight: bold;;
    	text-align: center;
    	vertical-align: top;
    }
    .main_left{
    	width: 10%;
    	height: 100%;
    	
    	float: left;
    
    }
    .main_left_div{
    	width: 100%;
    	height: 11%;
    	text-align: center;
    	border-style: groove;
    	border-color: #FF7FED;
    	border-bottom: none;
    
    	margin: 1px 2px 1px 1px;
    }
    .main_middle{
    	width: 80%;
    	height: 100%;
    	text-align: center;
    	margin-left: 20px 20px 20px 20px;
    
    }
    .main_right{
    	width: 20%;
    	height: 100%;
    
    	position: relative;
    	float: right;
    	top: -100%;
    	 
    }
    .main_right_up{
    	width: 100%;
    	height: 15%;
    
    }
    .main_right_down{
    	width: 100%;
    	height: 340px;
    	overflow: auto;
    
    }
    .p{
    	font-weight: bold;
    	text-align: center;
    }
    .a{
    	text-decoration: none;
    	text-align: center;
    	vertical-align: middle;
    	font-size: 150%;
    	font-family: 楷体;
    	font-weight: bold;
    	color: hsl(207, 95%, 50%);
    
    }
    

    关于收获

    这个制作虽然很简单且花费时间并不长,如果做的话半天就可以做一个大概,但其中的收获还是有很多的.读万卷书,也要行万里路. 下面来进行总结一下.

    HTML

    ① 关于布局问题,在三列中我发现中间一列和优劣并没有想象中的一次从左到右排列,而是自上而下的排列,我改变了float也是不行,这件事在两列中并没有发生,在两列中一个向左浮动一个向右浮动就可以解决,于是我上W3C和CSDN论坛发现了解决办法.
    有一个top属性和相对位置,绝对位置的概念,虽然这些我从课本中了解过但我并不能深刻理解它们的作用,现在有一些懂了.
    ② 关于背景图片问题,在我找的素材中,很多像素不合设的图片在整个网页中不会进行拉伸而是进行类似于填充效果和div有关,所有我不得不找了个纯色背景.
    ③ 超链接问题,这个网页中运用的超链接有文本超链接和图片超链接和电子邮件超链接,点击左侧导航栏以及logo和"联系我"都是超链接,在这里我设置了去掉下划线这一属性和更改了文本的颜色,但这些知识点在我的课下书和W3C并没有详细的提到这些问题,或许我没有仔细阅读W3C,这些知识是在mooc和CSDN论坛上找到了答案.去掉下划线

    ④div的border和margin问题,这些我初次实践了一些并设置了相应的效果.

    ⑤ HTML5中的音频和视频相关的标签,这些我是结合课本和W3C进行的也算是加深学习到了.
    ⑥ 字体格式,对齐方式,大小,等等,以前了解图片的浮动框但在设置字母时就想了想如何设置文本的浮动框,这次也算温故而知新了

    CSS

    这次CSS中我用到了class和id,说真的我看课本是感觉很懵,感觉不出来它们的很大区别,但在这次中我稍微理解了一些,还有我感觉我写的代码格式是不是有些问题.

    Sublime

    这次我用的编辑软件是Sublime相关插件在安装时就已经安装好了,这次是已经初步掌握了使用方法吧,比如说高亮,颜色以及快捷键啥的.

    素材方面

    不开玩笑,我找素材的实践一点都不短,视频是我从B站下载,还有logo是从其它地方下载,还有背景图片我也找了好久,并不是找不到好的素材而是好的素材都要相关的money或者会员.但那些图片是真的好好看!

    还有logo和b站的视频,如果相关作者看见了如果觉得不妥请立马联系我我去马上删掉!并对您说对不起.

    关于问题

    问题有太多太多了!
    我先把我想到的问题说一说,希望大家能给我些意见!
    ①关于HTML和CSS格式的问题
    ②关于网页布局的问题,如何充分利用px或者%
    ③文本对齐时的垂直布局vertical-align概念理解
    ④div的边框边界等的概念的理解
    ⑤超链接电子邮件的理解
    ⑥如何快速的找到相关的素材,前端类型的,有没有网站推荐
    ⑦大家是如何实践小项目来进行练习的
    ⑧表单和按钮等CSS我并没有运用因为我觉得这个网页类型是分享经典不能让用户还要进行登录操作以及我懒.

    下一次目标

    接下来我想进行Javascript的学习(已经在学了虽然进度很慢!)并且了解一下微信小程序的概念以及继续学习HTML和css来进行加深理解,大家有没有好的意见呢.

    展开全文
  • div+CSS网页制作

    2016-03-20 22:49:16
    1.CSS初始化:目的就是清除浏览器的默认样式 2.字体相关: 3.写样式的时候,尽量用class,少用id。因为id的权重太高了,在后面写js的时候,不好提取。 4.外边距合并问题:(内盒子有外边距,外盒子没有)...
  • Html+css静态网页制作

    2020-06-03 23:33:37
    html静态网页制作,购物页面,有插入音乐视频等,物美价廉!!!
  • 牛腩老师在视频中提到了css 跟着视频也简单的操作了,体会到了一点其给设计带来的好处,毕竟也是刚刚接触这部分,下面就来说说CSS    css是一套可行的,搞笑的网页维护方法,帮网页设计师统一维护众多的页面而不...
  • 本文和大家重点讨论一下如何学习DIV+CSS制作网页,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结。 如何学习DIV+CSS制作网页 我接触的很多人都问,如何学习Web...
  • html+css 网页

    2020-06-12 00:15:35
    用html和css写的一个简单页面,页面效果类似于百度新闻首页,下载即可使用,压缩包内包含图片,不会出现打开网页后无法显示图片的情况─=≡Σ(((つ•̀ω•́)つ
  • CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。  这两种语言是组成网页的最基本的内容,也是前端工程师的基本功。 本课程就是带着想入门或者对前端感兴趣的同学从零开始...
  • **加粗样式**HTML与CSS网页设计概述 网页主要由文字、图像和超链接等元素构成。还包含音频、视频以及flash等。 浏览网页是由文本组成的代码被浏览器渲染之后的结果。 网站是由多个网页的集合。网页网页是通过...
  • HTML/CSS自制网页

    2019-06-06 10:52:44
    标题:HTML/CSS自制简单网页(进阶版) 开发工具: HBulider 使用技术: HMTL/CSS 开发目的:熟练基础语法 进阶版特点: 优化内容: 1.解决了高度塌陷问题 2.优化了类选择器顺序 3.对被操作页面宽度进行了...
  • HTML5-CSS3网页设计

    2020-06-14 14:30:00
    1、网站至少由5个页面构成,除主页外,至少要包含四个主栏目,每个页面必须图文并茂,能较好地表达主题,切忌采用过多的文字、过多的图像或者过多flash,不允许添加视频。作品应体现Web的特点,网站结构完整,链接...
  • 细说CSS(CSS+CSS3)

    2019-12-18 15:11:02
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
1 2 3 4 5 ... 20
收藏数 15,329
精华内容 6,131