web商品列表css3布局_创建HTML5和CSS3单页Web布局

最新推荐文章于 2024-04-29 13:33:45 发布

cuketao5066

最新推荐文章于 2024-04-29 13:33:45 发布

阅读量611

点赞数

文章标签：列表 nagios gwt mooc cakephp

原文链接：https://www.script-tutorials.com/creating-a-html5-css3-single-page-template/

版权

web商品列表css3布局

Creating a HTML5 & CSS3 single page template

HTML5 & CSS3 single page template. Today we will create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation menu), promo area (jQuery Nivo Slider), center area with some content, bottom area (which you can use for footer links as example), and footer itself.

HTML5和CSS3单页模板。今天，我们将结合CSS3和jQuery创建HTML5 Web模板。当前模板将包含页眉区域(带有徽标和导航菜单)，促销区域(jQuery Nivo Slider)，带有某些内容的中央区域，底部区域(您可以将其用作页脚链接)和页脚本身。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Now, you can download package, check our prepared demo and lets start!

现在，您可以下载软件包，查看我们准备的演示，然后开始吧！

步骤1. Photoshop (Step 1. Photoshop)

As usual, quite each webmaster (designer) start thinking about initial idea which he like to build. And, I can suggest to use Photoshop to draw main layout – how all should looks

像往常一样，每个网站管理员(设计师)都开始考虑他喜欢建立的最初想法。而且，我建议使用Photoshop绘制主要布局-外观应如何

And only after – we can start thinking about initial layout of that page – HTML

只有在之后–我们才能开始考虑该页面的初始布局– HTML

步骤2. HTML (Step 2. HTML)

I separated whole layout to few sections:

我将整个布局分为几个部分：

header section – place, where we will put our logo, menu, promo slider
页眉部分–放置徽标，菜单，促销滑块的位置
central section – place for main content, bottom sections with some custom content
中央部分–主要内容的地方，底部有一些自定义内容
footer section – where you will able to put some links, company name
页脚部分–您可以在其中放置一些链接的公司名称

In HTML code I will use next HTML5 tags: <header>, <nav>, <section> and <footer>. Ok, lets check code of our sample

在HTML代码中，我将使用下一个HTML5标签：<header>，<nav>，<section>和<footer>。好，让我们检查示例代码

index.html (index.html)


<!DOCTYPE html><!-- The new doctype -->
<html class="cufon-active cufon-ready" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Coding A CSS3 &amp; HTML5 Page Template | Script tutorials demo</title>
    <meta charset="utf-8">
    <!-- Linking styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
    <!-- Linking scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</head>
<body id="main_page">
    <div class="main">
        <header><!-- Defining the header section of the page -->
            <div class="container">
                <h1><a class="logo" href="https://www.script-tutorials.com/">Your Logo</a></h1>
                <h2><strong><strong>And</strong>Your Promo</strong></h2>
                <nav><!-- Defining the navigation menu -->
                    <ul class="sf-menu sf-js-enabled">
                        <li class="first-item active"><a class="item" href="https://www.script-tutorials.com/">Home</a></li>
                        <li><a class="item" href="https://www.script-tutorials.com/">Tutorials</a>
                            <ul style="display: none; visibility: hidden;">
                                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                                <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
                                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
                                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                                <li class="last"><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                            </ul>
                        </li>
                        <li><a class="item" href="https://www.script-tutorials.com/category/resources/">Resources</a></li>
                        <li class="last-item"><a class="item" href="https://www.script-tutorials.com/about/">About</a></li>
                        <li class="last-item"><a class="item" href="https://www.script-tutorials.com/creating-a-html5-css3-single-page-template/">Go Back To The Tutorial</a></li>
                    </ul>
                </nav>
                <div id="slider-wrapper"><!-- Promo slider -->
                    <div id="slider" class="nivoSlider">
                        <img style="display: none;" src="images/promo1.jpg" alt="">
                        <img style="display: none;" src="images/promo2.jpg" alt="">
                        <img style="display: none;" src="images/promo3.jpg" alt="">
                    </div>
                    <div id="htmlcaption-1" class="nivo-html-caption">
                        <strong class="p2">Your promo text 1</strong>
                        <span class="p5">Promo text description here</span>
                        <a class="button" href="#">More</a>
                    </div>
                    <div id="htmlcaption-1" class="nivo-html-caption">
                        <strong class="p2">Your promo text 2</strong>
                        <span class="p5">Promo text description here</span>
                        <a class="button" href="#">More</a>
                    </div>
                    <div id="htmlcaption-2" class="nivo-html-caption">
                        <strong class="p2">Your promo text 3</strong>
                        <span class="p5">Promo text description here</span>
                        <a class="button" href="#">More</a>

最低0.47元/天解锁文章

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web商品列表css3布局_创建HTML5和CSS3单页Web布局

web商品列表css3布局HTML5 & CSS3 single page template. Today we will create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation m...
复制链接

扫一扫