Web前端开发-仿制卧龙控股主页

最新推荐文章于 2022-10-10 11:46:45 发布

viewerlin

最新推荐文章于 2022-10-10 11:46:45 发布

阅读量3.9k

点赞数 5

分类专栏： HTML/CSS 文章标签： HTML CSS Web

本文链接：https://blog.csdn.net/viewerlin/article/details/80025401

版权

本文是作者的Web前端开发自学笔记，详细记录了如何仿制卧龙控股主页的过程，包括主页的两个关键画面的实现，并提供了完整的HTML和CSS代码。

摘要由CSDN通过智能技术生成

Web前端开发，自学笔记整理

仿制卧龙控股主页

1.原始图片
这里写图片描述

2.仿制主页
主页画面1
这里写图片描述
主页画面2

3.完整代码
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>卧龙控股 | 首页</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <!--
        1.设计稿分析
            - 头部
            - 导航
            - 横幅
            - 新闻
            - 底部
        2.项目工程创建
            - 创建对应的文件夹
        3.根据模块划分，搭建页面基本框架
        4.将整体架构撑开
        5.一个个模块填充

        ps截图：
            - 矩形选框(选中需要截取的)
            - command + c (复制)
            - command + n (新建图层)
            - command + v (粘贴)
            - command + s (保存)
            - 选择保存路径、保存类型、文件名称

        盒子模型 = content + padding + border + margin
    -->
    <body>
        <!--1.头部-->
        <div id="header">
            <div class="logo">
                <a href="#">
                    <img src="img/logo.png" />
                </a>
            </div>
            <div class="search">
                <form>
                    <input type="text" value="SEARCH..." class="text"/>
                    <input type="submit" class="bt" value=""/>
                </form>
            </div>
        </div>


        <!--2.导航-->
        <div id="nav">
            <ul>
                <li><a href="#">集团介绍</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">卧龙市场</a></li>
                <li><a href="#">技术研发</a></li>
                <li><a href="#">国际合作</a></li>
                <li><a href="#">投资者关系</a></li>
                <li><a href="#">新闻资讯</a></li>
                <li class="last"><a href="#">人力资源</a></li>
            </ul>
        </div>

        <!--3.横幅-->
        <div id="banner">
            <img src="img/banner.png" />
        </div>

        <!--4.新闻-->
        <div id="news">
            <div class="news1">
                <div class="section1">
                    <h3>新闻资讯</h3>
                    <ul>
                        <li>
                            <a href="#">陈建成董事长出席ATB集团召开年度销售大会</a>
                            <span>2013-07-30</span>
                        </li>
                        <li>
                            <a href="#">中国电器工业协会分马力电机分会在卧龙召开理事长...</a>
                            <span>2013-07-30</span>
                        </li>
                        <li>
                            <a href="#">陈建成董事长访问中国驻德大使馆</a>
                            <span>2013-07-30</span>
                        </li>
                        <li>
                            <a href="#">企业文化是企业持续经营的关键要素</a>
                            <span>2013-07-30</span>
                        </li>
                        <li>
                            <a href="#">陈建成监事长在ATB集团2013年销售会议上发表重要...</a>
                            <span>2013-07-30</span>
                        </li>
                        <li>
                            <a href="#">喜迎七一唱卧龙 年轻力量激发企业持久活力 卧龙举...</a>
                            <span>2013-07-30</span>
                        </

最低0.47元/天解锁文章

viewerlin

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发-仿制卧龙控股主页

Web前端开发，自学笔记整理仿制卧龙控股主页1.原始图片 2.仿制主页主页画面1 主页画面2 3.完整代码 index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;卧龙...
复制链接

扫一扫

专栏目录