HTML5+CSS3制作网页实例:HTML5入门

HTML5+CSS3制作网页实例

文章最后提供HTML5+CSS3制作网页实例源码下载。

步骤1 -设计

设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。

步骤2 – HTML

头部html代码

<!DOCTYPE html>
<html>
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
        <title>CSS3+HTML5 制作单页面模板|实例</title>     
        <link rel="stylesheet" type="text/css" href="styles.css" />             
    </head>

页面导航区域代码

<body>
     <section id="page"> 
            <header> 
                <hgroup>
                    <h1>中国网页设计</h1>
                    <h3>权威的网页设计教程基</h3>
                </hgroup>
                <nav class="clear"> 
                    <ul>
                        <li><a href="#article1">建站入门</a></li>
                        <li><a href="#article2">建站软件</a></li>
                        <li><a href="#article3">网站优化</a></li>
                    </ul>
                </nav>
            </header>

我们使用新标签的部分,该部分将页面分成单独的语义部分。外层<section id=”page”> 是页面部分设置为960 px的宽度样式表。后面是标题标签和导航标签。

注意链接的href属性-# 对应于我们想要滚动到的ID。

主体文章1代码

<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
 <div class="line"></div>  
 <!-- Dividing line -->
 <article id="article1"> 
<!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                    <h2>建站入门</h2>                    
                    <div class="line"></div>                    
                    <div class="articleBody clear">                                       	
                    	<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
                    	  <img src="http://www.125jz.com/wp-content/uploads/2019/03/2019030703092520.png" width="500" height="300" />
                  	 </figure>                        
                        <p>很多学做网页的人,一开始满怀激情,但过不了多长时间,大多数人都放弃了,因为发现要学习<A href="http://www.125jz.com" target="_blank">网站制作</A>需要长期的学习,掌握很多技能才可以开发。<STRONG> 125网页设计站长给网站初学者的忠告:学习+目标+专注+耐心</STRONG></p>
                    </div>
</article>                
<!-- Article 1 end -->

页脚html代码

<footer> 
           <div class="line"></div>
           <p>Copyright 2015-www.125jz.com</p> 
           <a href="#" class="up">返回顶部</a>
</footer>

页脚标签,在页面的底部是JavaScript的其余部分包括添加jQuery库和scrollTo插件,我们将在接下来的步骤中使用。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3336.html

(2)
上一篇 2019年3月7日 上午9:34
下一篇 2019年3月10日 下午7:14

99%的人还看了以下文章

  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    3.6K1
  • 设计师提升作品精致度的4个方法!

    提升作品精致度的方式:1、选择背景要高清、尽量选简不选繁;2、中、英文字要使用相对应的字体,提升整体层次感;3,善于使用图形化的元素,但是要注意尽量不要太复杂,否则会影响整体视觉感受;4、合理的留白,但是要避免盲目过度的留白;

    2023年1月24日 网页设计
    1410
  • 一个优秀的网站设计应具备的6个特征

    1、明确和突出的品牌设计 优秀的网站设计师会将品牌的色彩、设计元素贯穿到整个网站的设计中。 2、抢眼独到的头条 网站要有强大的内容支撑。 首页是网站的脸,头条是这个网站的眼! 头条要抢眼,干脆,直击用户,在网页上要一目了然,是视觉焦点。清晰的排版和易于浏览的头条文章,是必须要有的。 3、有阶梯层级的导航 导航设计要简化,给人以“专业”的感觉。尽量让体验顺滑流…

    2018年9月23日
    1.9K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    4.6K0
  • label文字与textarea、input垂直居中、顶部对齐的方法

    在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。 姓名: 留言: 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…

    2018年3月18日
    6.7K0
  • 1秒学会两点透视绘图技巧

    三点透视是一种绘图方法,一般用于超高层建筑,俯瞰图或仰视图。第三个消失点必须和画面保持垂直的主视线,必须使其和视角的二等分线保持一致。 (二点透视)就是把立方体画到画面上,立方体的四个面相对于画面倾斜成一定角度时,往纵深平行的直线产生了两个消失点。 建筑绘画的两点透视要比三点透视还要难以掌控,Anatoly Reza Pahlevi 为我们展示了他的独门绝技…

    2018年7月14日 网页设计
    4.4K0

发表回复

登录后才能评论