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%的人还看了以下文章

  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    2.5K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    2.6K0
  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    3.1K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0
  • 如何设计有新意的精美网页?

    经常制作网页,可是没有新意且面目雷同或似曾相识。如何制作生动、活泼又充满新意的网页?那就好好看看设计大师的作品吧,拟物,创作的灵感来源于生活!

    2019年10月5日 网页设计
    2.7K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    4.0K0

发表回复

登录后才能评论