第二周Day01 仿Bootstrap网站

最新推荐文章于 2024-08-27 15:27:32 发布
最新推荐文章于 2024-08-27 15:27:32 发布
阅读量157 收藏 2
点赞数
分类专栏： html5 文章标签： 作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44023804/article/details/100750181
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二周周一作业</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <style>
        #head{
            width: 100%;
            height: 1629px;
            background: white;
        }
        #head-box{
            width: 1170px;
            height: 42px;
            background: black;
            margin: auto;
        }
        #head-box2{
            width: 100%;
            height: 42px;
            background: black;
        }
        #head-right{
            line-height: 37px;
            float: left;
            position: absolute;
            right: 40px;
        }
        #head-left{
            line-height: 37px;
            float: left;
        }
        a{
            color: #b8b8b8;
        }
        a:hover{
            color: white;
        }
        #banner{
            width: 100%;
            height: 498px;
        }
        #banner2{
            width: 100%;
            height: 54px;
            background: white;
        }
        #body{
            width: 100%;
            height: 96px;
            background: white;
        }
        .projects-header {
            width: 60%;
            text-align: center;
            font-weight: 200;
            display: block;
            margin: 60px auto 40px;
        }
        .row1 {
            margin-right: -15px;
            margin-left: -15px;
        }
        .row2{
            width: 55%;
            height: 1px;
            background: #b8b8b8;
            margin: auto;
        }
        #body2{
            width: 1170px;
            height: 732px;
            margin: auto;
            margin-top: 32px;
        }
        .box1{
            height: 366px;
            width: 292.5px;
            background: white;
            margin-top: 10px;
        }
        .box2{
            height: 362px;
            width: 252.5px;
            border: 1px solid #F2F2F2;
        }
        .box2:hover{
            border: 1px solid red;
        }
        #bottom{
            position: fixed;
            right: 20px;
            bottom: 100px;
            background: white;
        }
        #footer{
            width: 100%;
            height: 250px;
        }
        .row3{
            width: 100%;
            height: 1px;
            background: #b8b8b8;
            margin-top: 100px;
        }
        #footer-box{
            width: 1170px;
            height: 189px;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="head-box2">
    <div id="head-box">
        <div id="head-left">
            <a>Bootstrap中文网</a>
            &nbsp;&nbsp;<a style="font-size: 13px">Bootstrap2中文文档</a>
            &nbsp;&nbsp;<a style="font-size: 13px">Bootstrap3中文文档</a>
            &nbsp;&nbsp;<a style="font-size: 13px">Bootstrap4中文文档</a>
            &nbsp;&nbsp;<a style="font-size: 13px">Less教程</a>
            &nbsp;&nbsp;<a style="font-size: 13px">jQuery API</a>
            &nbsp;&nbsp;<a style="font-size: 13px">网站实例</a>
        </div>
        <div id="head-right">
            <a  style="font-size: 13px;text-align: right;">关于</a>
        </div>
    </div>
</div>
<div id="head">
    <div id="banner">
        <img src="img/banner1.PNG" style="width: 100%;height: 496px"/>
<!--        <img src="img/banner.PNG" style="width: 100%;height: 496px">-->
    </div>
    <div id="banner2">
        <img src="img/banner2.PNG" style="width: 100%;height:54px;">
    </div>
    <div id="body">
        <div class="projects-header">
            <h2>Bootstrap相关优质项目推荐</h2>
            <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
        </div>
    </div>
    <div class="row2"></div>
    <div class="row1">
        <div id="body2">
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b1.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">优站精选</h3>
                        <a class="text-muted">Bootstrap网站实例</a>
                        <p style="border: 2px;">Bootstrap优站精选频道收集了众多基于Bootstrap构建，设计精美的，有创意的网站</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b2.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;padding: 5px">
                        <h3 style="color: #2aabd2">Webpack</h3>
                        <a class="text-muted">是前端资源模块化管理和打包工具</a>
                        <p>Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成
                            符合胜场环境部署的前端资源。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b3.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">React</h3>
                        <a class="text-muted">用于构建用户界面的JavaScript框架</a>
                        <p>React起源于Facebook的内部项目，是一个用于构建用户界面的avaScript库。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b4.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">TypeScript</h3>
                        <a class="text-muted">中文手册</a>
                        <p>TypeScript是有微软开源的编程语言。它是TypeScript的一个超集，而且本质上向这个语言添加了
                            可选的静态类型和基于类的面向对象编程。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b5.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">jQuery API</h3>
                        <a class="text-muted">中文手册</a>
                        <p>根据最新的jQuery 1.11.x和2.1.x版本翻译的jQuery API中文文档/手册。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b6.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">Next.js</h3>
                        <a class="text-muted">中文文档</a>
                        <p>Next.js是一个轻量级的React服务端渲染应用框架。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b7.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">Babel</h3>
                        <a class="text-muted">是一个JavaScript编译器</a>
                        <p>Babel是一个JavaScript编译器。Babel通过语法转换器支持最新版本的JavaScript语法。</p>
                    </div>
                </div>
            </div>
            <div class="box1" style="float: left">
                <div class="box2">
                    <img src="img/b8.png" style="width:252.5px;height:150px;">
                    <div style="height: 200px;width: 252.5px;text-align: center;border: 2px;">
                        <h3 style="color: #2aabd2">Node.js</h3>
                        <a class="text-muted">中文文档/手册</a>
                        <p>Node.js是一个基于Chrome V8引擎的Javascript运行环境。Node.js使用了一个事件驱动，非阻塞式I/O的模型，
                            使其轻量又高效。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom"><img src="img/top.PNG" style=""></div>
    <div id="footer">
        <div class="row3"></div>
        <div id="footer-box">
            <img src="img/foot.PNG" style="width: 100%;height: 140px">
        </div>
        <div style="height: 29px;width: 30%;margin: auto;">
            <p class="text-muted">京ICP备11008151号-6   |   京公网安备11010802014853</p>
        </div>
    </div>
</div>
</body>
</html>
狐姬
关注
专栏目录
Python Web开发记录 Day3：BootStrap（前端框架）
流苏的博客
02-25 756
Python Web开发记录 Day3：BootStrap
基于bootstrap的仿站练习01
11-28
bootstrap模仿http://www.bootcdn.cn/网站，静态页面~
秤砣小组钟——2day01
ZMY_King的博客
09-10 166
@工商web实战开发软件1722秤砣小组钟—2day01 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2day01作业</title> <style> #head{ ...
Bootstrap案例练习：打造仿星巴克响应式网站
最新发布
weixin_42181686的博客
08-27 1080
本文还有配套的精品资源，点击获取 简介：Bootstrap是一个广泛使用的前端框架，它提供了一套可快速构建响应式网站的工具集。本次案例练习将详细介绍Bootstrap中的栅格系统、轮播组件、Card组件、Button组件、导航栏组件和Image工具，并展示如何将这些组件结合，以构建一个类似星巴克风格的网站。通过本案例，学习者将能够掌握Bootstrap的核心组件使用方法，创...
Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1570
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
仿Bootstrap中文网
weixin_44329441的博客
09-10 638
源代码：需要引用Bootstrap包中的bootstrap.min.css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href...
day53:bootstrap live 3
05-15
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。在“day53: bootstrap live 3”中，我们似乎正在继续一个与Bootstrap相关的项目，专注于实现...
酒店管理系统bootstrap_day1
07-11
在【压缩包子文件的文件名称列表】中的"bootstrap_day1"，可能是项目第一天的源代码或者初步设计文件，包含了上述部分或全部内容的初始实现。随着项目的推进，开发者会不断添加和改进功能，确保酒店管理系统能够满足...
前端 Bootstrap 代码
03-31
这个压缩包文件集合显然包含了一系列关于学习和使用Bootstrap的教程或代码示例，可能是一个逐步指导课程的材料，从基础到进阶，按照天数（day01至day06）进行组织。 首先，让我们深入理解Bootstrap的核心概念： 1....
这是拿bootstrap V4 去写的融职教育网站基本实现了功能
07-29
在"day02"这个文件夹中，可能包含了项目开发的第二阶段内容，可能包括更深入的页面布局、功能实现、组件优化或者错误修复。这些文件可能是HTML模板、CSS样式表、JavaScript脚本，甚至可能包含图片和其他资源文件。...
bootstrap仿Ghost静态页面
01-25
bootstrap 仿Ghost静态页面
模仿人家网站做的bootstrap几个页面
10-30
模仿人家网站做的bootstrap几个页面 兼容IE8+ 在IE8上测试 网站要放置在服务器上
bootstrap 仿实例
weixin_34238633的博客
09-06 362
  bootstrap实现一个网页  html文件   1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head lang="en"&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;Ghost&lt;/title&gt
bootstrap第一个模仿页
前端菜鸟进化史
04-15 316
目的：增加对bootstrap的熟练原作品：我的模仿作品：
Bootstrap仿制CSDN用户主页页面
张宜强的博客
10-07 1970
Bootstrap仿制CSDN用户主页页面
使用bootstrap模仿bootstrap网站首页
xiongzhouxiong的博客
04-08 2677
代码如下：使用的包有bootstrap.min.cssjquery.min.jsbootstrap.min.js&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&
bootstrap模仿官网首页作业
Pupilla的博客
09-11 2222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="style...
深入理解前端Bootstrap开发技巧
在本文件中提到的压缩包子文件的文件名称列表（day03.zip、day0506.zip、day02.zip、day01.zip），这些文件可能是存放了Bootstrap代码的项目文件压缩包。这些文件通常包含了网页设计和开发过程中所需的HTML、CSS、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值