简单的界面

最新推荐文章于 2020-12-26 00:09:50 发布
最新推荐文章于 2020-12-26 00:09:50 发布
阅读量166 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yt971208711/article/details/108034740
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>桃视频首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
    <!--头部导航区域-->
    <header>
        <div class="container nav-bar">
            <!--logo部分-->
            <div class="nav-logo">
                <a href="/">
                    <img src="imgs/logo.png" alt="">
                    <span class="logo-text">桃视频</span>
                </a>
            </div>
            <!--视频类别导航-->
            <div class="nav-list">
                <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><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><a href="">旗帜</a></li>
                    <li><a href="">拍客</a></li>
                    <li><a href="">万象</a></li>
                    <li><a href="">排行榜</a></li>
                </ul>
            </div>
            <!--用户登录区域-->
            <div class="nav-user">
                <ul>
                    <li><a href="" class="btn-download">下载APP</a></li>
                    <li><a href="" class="btn-search"><i class="fa fa-search"></i></a></li>
                    <li><a href="" class="btn-login"><i class="fa fa-user"></i></a></li>
                </ul>
            </div>
        </div>
    </header>

    <section>
        <div class="container">
            <!--视频推荐-->
            <div class="recomment">
                <div class="item-big">
                    <a href="">
                        <video src="video/1.mp4" autoplay class="media-src"></video>
                    </a>
                </div>
                <ul class="item-small">
                    <li>
                        <a href=""><img src="imgs/2.jpg" class="media-src" alt=""></a>
                        <div class="video-intr">
                            <div class="video-author">
                                <span class="dj">独播</span>
                                <span class="author">softeem</span>
                                <span class="splite"></span>
                                <span class="fav-icon fa fa-heart"></span>
                                <span class="fav-count">2345</span>
                            </div>
                            <div class="video-title">
                                独家纪录波特兰抗议夜，抗议者：联邦执法者是暴力的始作俑者
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href=""><img src="imgs/2.jpg" class="media-src" alt=""></a>
                        <div class="video-intr">
                            <div class="video-author">
                                <span class="dj">独播</span>
                                <span class="author">softeem</span>
                                <span class="splite"></span>
                                <span class="fav-icon fa fa-heart"></span>
                                <span class="fav-count">2345</span>
                            </div>
                            <div class="video-title">
                                独家纪录波特兰抗议夜，抗议者：联邦执法者是暴力的始作俑者
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="item-small">
                    <li>
                        <a href=""><img src="imgs/2.jpg" class="media-src" alt=""></a>
                        <div class="video-intr">
                            <div class="video-author">
                                <span class="dj">独播</span>
                                <span class="author">softeem</span>
                                <span class="splite"></span>
                                <span class="fav-icon fa fa-heart"></span>
                                <span class="fav-count">2345</span>
                            </div>
                            <div class="video-title">
                                独家纪录波特兰抗议夜，抗议者：联邦执法者是暴力的始作俑者
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href=""><img src="imgs/2.jpg" class="media-src" alt=""></a>
                        <div class="video-intr">
                            <div class="video-author">
                                <span class="dj">独播</span>
                                <span class="author">softeem</span>
                                <span class="splite"></span>
                                <span class="fav-icon fa fa-heart"></span>
                                <span class="fav-count">2345</span>
                            </div>
                            <div class="video-title">
                                独家纪录波特兰抗议夜，抗议者：联邦执法者是暴力的始作俑者
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <footer>
        <div class="copy">&copy;软帝集团 版权所有</div>
    </footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}
ul,
ol{
    list-style: none;
}
a,
img,
span{
    display: inline-block;
}
a{
    text-decoration: none;
    color: #333;
    font-size: 0.8em;
}

header {
    position: fixed;
    top:0;
    left:0;
    z-index: 9990;
    height: 60px;
    width: 100%;
    background: #222;
}
section{
    position:relative;
    top:60px;
    height: 2000px;
}

footer{
    position: relative;
    margin:0 auto;
    padding:30px 50px;
    background: #222;
}
.copy{
    text-align: center;
    color:#fff;
}

.container{
    position: relative;
    margin:0 auto;
    width: 70%;
    max-width: 1280px;
    min-width: 1000px;
}

/*å¯¼èˆªåŒºåŸŸæ ·å¼*/
.nav-bar{
    height: 100%;
}
.nav-bar>div{
    float:left;
    height: 60px;
    line-height: 60px;
}
.nav-logo,
.nav-user{
    width:15%;
}
.nav-list{
    width: 70%;
    min-width: 850px;
    /*height: 60px;*/
    /*line-height: 60px;*/
}

.nav-logo img{
    float: left;
    height: 50px;
}
.logo-text{
    margin:0 10px;
    height: 60px;
    line-height: 60px;
    font-size: 1.5em;
    color:#fff;
}
/*è§†é¢‘ç±»åˆ«å¯¼èˆªæ ·å¼*/
ul>li{
    float: left;
    margin:0 10px;
}
.nav-list a{
    display: block;
    color:#ccc;
}
.nav-list a:hover{
    color:#ff6700 !important;
    text-decoration: underline;
}
/*ç”¨æˆ·ç™»å½•åŒºåŸŸæ ·å¼*/
.nav-user a{
   color:#fff;
}
.btn-download{
    padding:4px 8px;
    height: 20px;
    line-height: 10px;
    border:1px solid #fff;
    border-radius: 10px;
}
.btn-download:hover{
    background: #fff;
    color: #222;
}
.nav-user li{
    margin: 0 15px;
}
/*视频推荐*/
.recomment{
    display: flex;
    padding: 40px 0;
    height: 600px;
}
.item-big{
    margin-right: 20px;
    flex:2;
    background: #000;
}
.item-small{
    flex:1;
}
.item-small li{
    position: relative;
    height: 250px;
    width: 330px;
    background: #FDDE01;
    overflow: hidden;
}
/*.recomment ul:not(:last-child){*/
    /*margin-right: 20px !important;*/
/*}*/
.item-small li:nth-child(1){
    margin-bottom: 20px;
}
.item-big>a,
.item-small>li>a{
    display: block;
    width: 100%;
    height: 100%;
}
.media-src{
    width: 100%;
    height: 100%;
}
.item-small img{
    /*css3过渡 */
    transition: all 1s;
}
.item-small img:hover{
    /*css3新增2d转换：缩放*/
    transform: scale(1.1);
}

/*视频介绍*/
.video-intr{
    position: absolute;
    bottom: 0;
    padding:15px;
    width: 100%;
    background: rgba(0,0,0,0.5);
}
.video-author span{
    margin:5px 10px 5px 0;
    color:#fff;
    font-size: 0.6em;
}
.video-author .dj{
    padding:0 4px;
    background: #5892d9;
    border-radius: 2px;
}

.video-author .splite{
    position: relative;
    top:6px;
    width: 1px;
    height: 12px;
    background: #fff;
}

.fav-icon:hover{
    color:#f00;
}
.video-title{
    color:#fff;
    font-size: 18px;
}
Smoke丶鬼
关注
python可视化界面编程 pycharm_pycharm开发一个简单界面和通用mvc模板(操作方法图解)...
weixin_39747087的博客
11-28 2080
文章首先使用pycharm的 PyQt5 Designer 做一个简单的界面，然后引入所谓的“mvc框架”。一、设计登录界面下面开始第一个话题，使用pycharm的 PyQt5 Designer 做一个简单的界面。上一篇最后，在pycharm中配置了PyQt5 Designer 和 uic，接下来，使用这些工具，开发一个界面。1、首先打开 Designer1) 在左侧任意位置（下图桔色框内）点击右...
一个简单的界面
griffin041702的博客
11-08 338
有了前文的说明，现在就做一个简单的界面： 在配置中，可以设置数据服务器的配置，因为后续是准备做一个数据服务器，为客户端提供1分钟基本行情数据，实现数据与交易分离。如果不分离的话，每次关闭客户端，那么数据则会丢失，这样的后果可不是咱们想要的，为了保证数据的及时性和准确性，使用数据服务器势在必得。 另外想说的是，后续策略的都做成动态库，在客户端，把策略基类封装一下即可，不需要知道太多的细节。、 在这里提出一个“策略元”的概念，其实就是策略与账号、合约的一种绑定关系，不同平台不同全名，而我取名为“策略元”。
02_制作一个简单的界面
weixin_42131805的博客
03-29 760
制作一个简单的界面 在实现这个基本窗口之前，我们首先根据自己的习惯设置一下 DuiLib 编译后生成的文件路径和项目依赖的头文件目录。你不一定要按着我的修改，符合你自己的使用习惯即可。要修改的位置主要有一下几个。修改过程比较繁琐，主要还是因为 DuiLib 是从 VC6 升级上来的，很多属性需要删除和修改，也有些属性是 DuiLib 团队自己的目录结构风格，改与不改不影响使用。 常规->输...
CSS3 过渡 文字向上滚动
weixin_30362083的博客
08-07 331
<!--师资介绍--> <div class="teac_intr"> <div class="container"> <h1 class="f50 bold_txt text-center">师资介绍</h1> <ul class="clearfix"> ...
JAVA实现简单的登录界面
热门推荐
hnu1601的博客
10-26 12万+
我本来是学C++的，然后课程上老师要求做一个登陆界面，用C++实现不限时，然后就选择了JAVA，从零开始自学JAVA。好在网上很多大佬都写了如何用JAVA编写登陆界面的博客，写得很详细，使得我第一次接触JAVA也能看懂一二。 比较推荐这篇，博主真的很细心，我主要也是参考的这篇文章（分为一、二两篇）： https://blog.csdn.net/Alexwym/article/details/8...
c#简单界面控件
02-24
c#简单界面控件
Delphi7_DirectUI_简单界面源码
07-02
【标题】"Delphi7_DirectUI_简单界面源码" 涉及到的是使用 Delphi 7 开发工具，结合 DirectUI 技术创建一个具有美化效果的简单用户界面。Delphi 7 是一款经典的面向对象的编程环境，基于 Pascal 语言，广泛用于 ...
cvui.h 做简单界面需要他
05-30
做一个简单界面的核心
类似wireshark抓包简单界面_myzuoye.zip
最新发布
09-22
类似wireshark抓包简单界面_myzuoye
一个简单完整的网页
淡淡的芦苇的博客
07-24 6万+
获得源码链接，点击这里 网页头部+banner和信息部分+新闻部分+底部 一 头部 效果： 先对css进行初始化 分析：头部有一张图片和一个input输入框还有一个按钮+下面的通栏 因为用到左浮，右浮的地方不同我们可以写一个通类 这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐 二、通栏（宽度为适应屏幕所以是10...
PHP实现最简单的登录界面
PHP学习日志——地雷
05-26 9万+
PHP学习路上的第一个完整的极小极小的项目，总算是看着了做项目的希望了，特意做个记录登录界面：html代码（login.html)：&lt;form action="login.php" method="post"&gt; &lt;fieldset&gt; &lt;legend&gt;用户登录&lt;/legend&gt; &lt;ul&gt; &lt;li
一个简单交互界面的实现
qq_32108893的博客
01-05 2万+
一个简单交互界面的实现 这个界面本来是今年做NXP智能车的时候为了更改参数方便设计的，这其实又是一套用状态机的思想来实现的一个显示框架。 这个显示界面只是一个操作逻辑，所以它的的移植性还是挺高的，虽然本来设计的时候只是在OLED上拿来调参。 之前做的一个数硬币的机子，用的显示是LCD的12864，上面的界面也是这套程序做了一些简单的修改就能用了。 后来给做电磁的学弟，他自己移植
HTML+CSS的练习之网上书城主页面的实现
striner的博客
12-01 3万+
博主终于把CSS学完了,废话不说,先上代码~   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;bookStore&lt;/title&gt; &lt;style type="text/css"&gt; .clear{
HTML最基本的页面
zxc_c_java的博客
08-24 4038
前面的文章简单的介绍了一些HTML标签，当然只是HTML标签中的一小部分
一个简单的登录界面设计
u012947276的博客
01-22 1万+
第一步：设计数据库  这一步  比较简单 不做说明    看截图 第二步：创建实体User类 第三步：创建login.jsp文件 第四步：再创建注册页面register.jsp 第五步：再创建utils层，公共的工具层Dbuntil.java; 第六步：然后创建dao层数据交互层的接口和实现类 interface： UserDao UserDaoImpl
一个简单的html页面
ngwth_nail的博客
09-15 1万+
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
用HTML做一个简单的界面
a23_23的博客
12-26 3600
只做了个超级超级简单的界面，只是大概总结了HTML的一些知识点，超级超级超级初级哇 目录前言界面**代码：** 前言 建议在这里打开 ，结合界面理解叭。 界面 大概的界面样子 代码： <!DOCTYPE html> <!---"!"+回车，自动生成模板，body里写内容--> <html lang="en"> <!-- Ctrl+/ 整行注释 --> <head> <meta charset="UTF-8"&
C语言实现五子棋源码与简单界面探讨
虽然该版本的五子棋程序没有带可视化界面，仅限于命令行交互，但不失为一个基础的编程示例。文章的核心内容包括棋盘初始化、显示棋盘和下子操作。 1. **棋盘初始化函数**: `init_Chessboard()` 是关键部分，它接受...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值