页面练习

最新推荐文章于 2022-05-13 09:38:10 发布
最新推荐文章于 2022-05-13 09:38:10 发布
阅读量268 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcx1203/article/details/82929271
版权

index 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">新闻</a></li>
          <li><a href="#">国际</a></li>
          <li><a href="#">国内</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="denglu.html"><span class="glyphicon glyphicon-log-in"></span> &nbsp;登录</a></li>
           <li><a href="zhuce.html"><span class="glyphicon glyphicon-user"></span> &nbsp;注册</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="col-sm-2">
        <div class="list-group left-side">
            <a class="list-group-item left-side-active" href="#">综合</a>
            <a class="list-group-item " href="#">电影</a>
            <a class="list-group-item " href="#">电视剧</a>
            <a class="list-group-item " href="#">综艺</a>
            <a class="list-group-item " href="#">娱乐</a>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object news-png" src="https://dummyimage.com/200x100/000/fff&text=a" alt="新闻图片">
                </a>
            </div>
        <div class="media-body">
            <h4 class="media-heading">新闻名称</h4>
            <div class="news-info">
                    <span>小新</span>
                    <span>25k评论</span>
                    <span>7分钟前</span>
            </div>
        </div>
    </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object news-png" src="https://dummyimage.com/200x100/000/fff&text=b" alt="新闻图片">
                </a>
            </div>
        <div class="media-body">
            <h4 class="media-heading">新闻名称</h4>
            <div class="news-info">
                    <span>小新</span>
                    <span>25k评论</span>
                    <span>7分钟前</span>
            </div>
        </div>
    </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object news-png" src="https://dummyimage.com/200x100/000/fff&text=c" alt="新闻图片">
                </a>
            </div>
        <div class="media-body">
            <h4 class="media-heading">新闻名称</h4>
            <div class="news-info">
                    <span>小新</span>
                    <span>25k评论</span>
                    <span>7分钟前</span>
            </div>
        </div>
    </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object news-png" src="https://dummyimage.com/200x100/000/fff&text=d" alt="新闻图片">
                </a>
            </div>
        <div class="media-body">
            <h4 class="media-heading">新闻名称</h4>
            <div class="news-info">
                    <span>小新</span>
                    <span>25k评论</span>
                    <span>7分钟前</span>
            </div>
        </div>
    </div>
        <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
        </div>

    <div class="col-sm-2">
        <div class="list-group hot-news">
            <a href="#" class="list-group-item">最热推荐</a>
            <a href="#" class="list-group-item">国庆节</a>
            <a href="#" class="list-group-item">圣诞节</a>
            <a href="#" class="list-group-item">春节</a>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">




</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">新闻</a></li>
          <li><a href="#">国际</a></li>
          <li><a href="#">国内</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> &nbsp;登录</a></li>
           <li><a href="#"><span class="glyphicon glyphicon-user"></span> &nbsp;注册</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="container">
    <div class="col-lg-4 col-lg-offset-4" style="border: 1px solid lightgray; margin-top: 50px">


            <h1>登录
                <small>没有账号？<a href="zhuce.html">注册</a></small>
            </h1>
            <form>
                <div class="form-group">
                    <label>用户名/手机/邮箱</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block" type="submit">登录</button>
                </div>
                <div class="form-group">
                    <a href="#">忘记密码？</a>
                </div>
            </form>


    </div>
</body>
</html>

在这里插入图片描述

注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">




</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">新闻</a></li>
          <li><a href="#">国际</a></li>
          <li><a href="#">国内</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> &nbsp;登录</a></li>
           <li><a href="#"><span class="glyphicon glyphicon-user"></span> &nbsp;注册</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="container">
    <div class="col-lg-4 col-lg-offset-4" style="border: 1px solid lightgray; margin-top: 50px">
    <h1>注册
    </h1>
    <form>
      <div class="form-group">
        <label>手机</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group">
        <label>验证码</label>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <div class="btn btn-default">获取验证码</div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control">
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block" type="submit">注册</button>
      </div>
    </form>
  </div>
</div>
</body>
</html>

在这里插入图片描述

zcx1203
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
练习 | css页面练习案例
A123ppleQueen的博客
06-09 727
纸质卡片
HTML基础练习——模拟简单页面
Jdrag的博客
08-25 751
HTML基础练习
HTML作业（一）
ll_j_21的博客
10-16 5959
一、 在这里插入代码片
基础页面布局练习
V________的博客
11-11 202
<!DOCTYPE html> <!--文档声明，Document Type，既不是元素也不是注释，用于通知浏览器文档正使用哪个HTML版本--> <html lang="en"> <head> <!--文档头，是HTML元素中第一个子元素--> <meta charset="UTF-8"> <!--空元素，指示浏览器使用UTF-8解析界面--> <meta name="viewpor
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
前端基础-静态页面练习.zip
07-08
【前端基础-静态页面练习.zip】是一个集合了前端开发基础训练的资源包，主要涵盖了HTML和CSS的基础知识，提供了一系列的实战练习项目，适合初学者或希望巩固前端基础的开发者进行学习和实践。这个压缩包包含多个实际...
bootstrap页面练习-4个完整页面--哈哈
09-26
在“bootstrap页面练习-4个完整页面--哈哈”这个压缩包中，你将找到一系列资源，帮助你深入理解和实践Bootstrap框架。 首先，我们有两个PPT文件：“bootstrap入门919.ppt”和“bootstrap924.ppt”。这些文件通常...
Html页面嵌套页面练习
05-19
在“Html页面嵌套页面练习”这个主题中，我们主要关注如何通过HTML来创建美观且功能丰富的网页，其中包括主页、注册页面、登录页面以及搜索页面的设计。 首先，让我们来探讨主页的设计。一个吸引人的主页不仅要有...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
SSM功能页面练习资料学习
10-18
在"SSM功能页面练习资料"中，你可能会接触到以下知识点： 1. **环境搭建**：包括安装JDK、Tomcat服务器，配置Java环境变量，下载并引入SSM框架的相关依赖，如Spring、SpringMVC、MyBatis的jar包，以及相关的数据库...
Web前端框架与移动应用开发第三章上机练习
07-17
上面两种都是大小固定的,不会随着屏幕的变化而变化,自适应可以将li充满整个父容器,.nav-justified, 不过需要依附在.nav-tabs或者.nav-pills上
练习用静态网页设计
12-05
练习资料。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
HTML+CSS简单网页练习
海梦初的博客
02-25 4441
前言     运用了CSS进行简单的网页制作 一、效果图 二、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机</title> <script type="application/javascript"> alert("欢迎—&g.
html+css简单网页练习
热门推荐
A__QAQ的博客
04-16 1万+
    网页的大致效果html代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Design&lt;/title&gt; &lt;script type="text/javascript"
一起学WEB（八） 一个网页练习（一）
FebWaltz的博客
02-08 2114
通过一个网页练习，逐步建立漂亮的网站（一）
Bootstrap(书籍查询&购物车&订单)
qq_64001795的博客
05-13 643
目录 媒体对象实现书籍查询页面 购物车 模态框实现订单 媒体对象实现书籍查询页面 <div class="col-md-9 aa"> <!-- 媒体对象实现书籍搜索 --> <!-- list-unstyled 去除列表对象 --> <ul class="list-unstyled"> <li class="media" style="border-bottom: 1px solid #00000
Bootstrap练习：百度登录框
斜键仙的博客
11-03 2740
练习：点击登录，弹出一个登录表单，运用到了bootstrap模态框知识和js的插件，练习源文件在下面给出自行下载。 目录一、练习目录结构二、练习源码三、运行效果小结 一、练习目录结构 二、练习源码 index.html文件代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
北大青鸟jquery第十章上机练习_《Bootstrap与jQuery UI框架设计》（水利水电）案例及作业素材下载...
weixin_39889642的博客
02-11 326
《Bootstrap与jQuery UI框架设计》案例及作业素材下载集合下载：链接: https://pan.baidu.com/s/1QzgbEybJsns5Cmg0dD_UEQ 提取码: icmk分章节下载：【第1章 Bootstrap入门】 链接: https://pan.baidu.com/s/1VgfduAzvPICyI9t9Q_jS-A 提取码: xn6e【第2章 Bootstra...
练习navigator 页面链接组件
最新发布
06-12
好的，以下是练习 `navigator` 页面链接组件的步骤： 1. 在 `app.json` 文件中定义需要跳转的页面路径。例如，定义一个 `pages` 数组，其中包含两个页面路径： ```json { "pages": [ "pages/index/index", ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值