html css 优酷客户端视频界面仿写 rem swiper flex使用

最新推荐文章于 2023-12-26 15:35:11 发布
最新推荐文章于 2023-12-26 15:35:11 发布
阅读量1.7k 收藏 5
点赞数 1
文章标签： flex html css git swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_goodstudy/article/details/51420017
版权

git 地址

git@github.com:comjustforfun/youkuLayoutHtml.git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>youkuMianPage</title>
    <script src="BaseJs/adaptive.js" type="text/javascript" ></script>
    <script src="BaseJs/jquery.min.js" type="text/javascript" ></script>
    <script src="js/main.js" type="text/javascript" ></script>
    <link rel="stylesheet" type="text/css" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.min.css">

    <script>
    window['adaptive'].desinWidth = 750;// 设计图宽度
    window['adaptive'].baseFont = 100;// 没有缩放时的字体大小
    window['adaptive'].maxWidth = 375;// 页面最大宽度 默认540
    window['adaptive'].init();// 调用初始化方法
</script>
<style type="text/css" media="screen">

    @font-face {
        font-family: 'iconfont';
        src:url('iconfont/iconfont.ttf') format('truetype'), 
        url('iconfont/iconfont.svg#iconfont') format('svg');
    }
    html{
        font-size: 100px  !important;
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

    body{
        background: white;
        overflow-y: scroll;
    }

    a{
        text-decoration: none;
    }

    li{
        list-style: none;   
    }

    *{
        margin: 0;
        padding: 0;
    }

    .select{
        color: blue;
    }

    .container{
        width: 100%;
    }

    header{
        height: 3rem;
        width: 100%;
        background: red;
    }

    content{
        overflow-y: scroll;

    }

    .title{
        border-bottom: 0.05rem solid  gray;
    }

    .title h2{
        display: flex;
        line-height: 0.4rem;
        height: 0.4rem;
    }

    .title .des{
        flex: 1;
    }

    html{
        font-size: 16px;
    }

    .font{
        font-size: 0.16rem;
    }

    .show_taial li{
        float: right;
    }

    .show_taial li.play{
        float: left;
    }

    .show_taial:after{
        content:".";
        clear:both;
        display:block;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
    .show_taial li{
        margin-left: 20px;
        font-size: 16px;
    }

    .show_taial{
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
    }
    .show_taial .share{
        margin-left: 0.1rem;
    }
    .show_taial li.li_share{
        margin-right: 0.2rem;
    }

    .introduce{
        display: flex;
        border-bottom: 0.05rem solid  gray;
        padding-bottom: 0.1rem;
    }

    .introduce  li:nth-of-type(1){
        flex: 1;
        margin-left: 0.1rem;
    }

    .introduce  li:nth-of-type(2){
        flex: 8;
    }

    .introduce  li:nth-of-type(3){
        flex: 2;
    }

    .introduce  li:nth-of-type(3) p{
        line-height: 0.5rem;
        color: white;
    }
    .read a{
        color: white;
        font-size: 0.16rem;
    }

    .read{
        background: blue;
        border-radius: 10px;
        text-align: center;
        line-height: 0.2rem;
        margin-right: 0.2rem;
        line-height: 0.3rem;
    }
    .introduce p,.introduce li{
        font-size: 0.16rem;
        line-height: 0.3rem;
    }
    .introduce{
        margin-top: 0.2rem;
    }

    .headimg img{
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
    }

    .choicePage{
        display: flex;
        margin-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-bottom: 0.1rem solid  gray;
    }

    .choicePage p,.choicePage a,.choicePage span,.choicePage li{
        font-size: 0.16rem;
    }

    .choicePage li:nth-of-type(1){
        flex: 7;
    }

    .choicePage li:nth-of-type(2){
        flex: 2;
    }

    .update_time{
        margin-right: 0.1rem;
    }

    a.more{
        font-size: 0.2rem;
    }

    .cut_line{
        width: 0.02rem;
        height: 0.1rem;
        display: inline-block;
        background: blue;
    }

    .sw li{
        font-size: 0.16rem;
    }

    dt img{
        width: 50px;
        height: 50px;
        border-radius: 25px;
    }

    footer{
        margin-top: 0.2rem;
        padding-bottom: 0.1rem;
        border-bottom: 0.01rem solid gray;

    }

    footer .imgContainer,footer div{
        float: left;
        height: 1rem;
        /*-----------------------------------------------------------------------------------------------------------------------------------------*/
    }
    footer div p{
        font-size: 0.16rem;
    }
    footer p img{
        width: 100%;
        height: 100%;
    }

    footer:after{
        content:".";
        clear:both;
        display:block;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }

    footer p.imgContainer{
        width: 1.5rem;
        height: 1rem;
        /*------------------------------------------------------------------------------------------------------------------------*/
    }
    footer div{
        display: flex;
        flex-direction: column;
        width: 2rem;
        margin-left: 0.1rem;
    }

    .video_title p{
        -webkit-flex:1;
        flex: 1;
    }

    .video_title p:nth-of-type(1){
        margin-top: 0.1rem;
    }
</style>


</head>
<body>

    <div class="container">
        <header>

        </header>

        <content>

            <div class="title">
                <h2><span  class="des font">Flower sister Chinese second</span><i class="font">></i> </h2>
                <ul class="show_taial">
                    <li class="play"><i class="iconfont">&#xe631;</i><span class="share">sharePreference</span></li>
                    <li  class="li_share"><i class="iconfont">&#xe631;</i></li>
                    <li><i class="iconfont">&#xe640;</i></li>
                    <li ><i class="iconfont">&#xe639;</i></li>
                </ul>
            </div>

        </content>

        <ul class="introduce">
            <li class="headimg">
                <img src="img/head.png" alt="">
            </li>
            <li>
                <p>
                    flower sister
                </p>
                <p>
                    7.7millons read
                </p>
            </li>
            <li>
                <p class="read">
                    <a href=""> +read</a>
                </p>
            </li>
        </ul>

        <ul class="choicePage">
            <li>
                <p><span class="cut_line"></span><span> choicePage</span></p>
            </li>
            <li>
                <span class="update_time">updateto</span>
                <a href="" class="more">></a>
            </li>
        </ul>
        <!-- Swiper -->
        <div class="swiper-container" style="border-bottom: 0.1rem solid gray">
            <div class="swiper-wrapper">
                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>
                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>

                <div class="swiper-slide">  
                    <ul class="sw">
                        <li>sister</li>
                        <li>160514</li>
                        <li>icon 1.6milion</li>
                    </ul>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>


                <!-- Swiper -->
        <div class="swiper-container" style="border-bottom: 0.1rem solid gray">
            <div class="swiper-wrapper">
                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>
                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>

                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>

                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>

                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>

                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>

                <div class="swiper-slide">  
                    <dl>
                        <dt><img src="img/head.png" alt=""></dt>
                        <dd>huiyuan</dd>
                    </dl>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>


            <ul class="choicePage">
            <li>
                <p><span class="cut_line"></span><span> flower</span></p>
            </li>
            <li>
                <span class="update_time">updateto</span>
                <a href="" class="more">></a>
            </li>
        </ul>

        <footer>
            <p class="imgContainer"><img src="img/head.png" alt=""></p>
            <div class="video_title">
                <p>first</p>
                <p>secong</p>
                <p>third</p>
            </div>
        </footer>

            <footer>
            <p class="imgContainer"><img src="img/head.png" alt=""></p>
            <div class="video_title">
                <p>first</p>
                <p>secong</p>
                <p>third</p>
            </div>
        </footer>

            <footer>
            <p class="imgContainer"><img src="img/head.png" alt=""></p>
            <div class="video_title">
                <p>first</p>
                <p>secong</p>
                <p>third</p>
            </div>
        </footer>

            <footer>
            <p class="imgContainer"><img src="img/head.png" alt=""></p>
            <div class="video_title">
                <p>first</p>
                <p>secong</p>
                <p>third</p>
            </div>
        </footer>

            <footer>
            <p class="imgContainer"><img src="img/head.png" alt=""></p>
            <div class="video_title">
                <p>first</p>
                <p>secong</p>
                <p>third</p>
            </div>
        </footer>


        <!-- Swiper JS -->
        <script src="js/swiper.min.js"></script>


    </div>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 5,
            paginationClickable: true,
            spaceBetween: 0,
            freeMode: true
        });
    </script>
</body>
</html>
一朵红杏
关注
html+css仿写简单网站
12-15
刚入门HTML+CSS，学习了一段时间后，为了练手，便写了这样一个静态的淘宝页面。就在刚才，终于完工。不得不说，内心有点小激动… 代码有点多，贴出来不太方便。如果大家有需要的话，直接去演示页面查看源代码扒取吧…
html5移动端引入优酷视频iframe自适应
热门推荐
Spider--Man
07-12 1万+
1、要引入的视频<iframe height=498 width=510 src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder=0 allowfullscreen></iframe>2、css里设置iframe的宽度为100%3、根据屏幕宽度自适应，这里我设定视频16/9的固定比例window.onload = windo
仿优酷视频焦点轮播图布局html页面前端源码
mazai5080的博客
07-30 1116
源码编码：20243，需要的朋友可以下载学习
HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能
weixin_30751947的博客
06-18 152
一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。 效果图： 看起来还是很不错，下面我给大家分析下，极其核心代码很简单： _canvas = document.createElement("canvas"); _ctx = _canvas.getC...
[HTML+CSS]仿写小米官网首页-第二次
chen_ousong的博客
02-17 1739
因为白天学习JS，所以用晚上的时间写的，这是第二遍。 这一次重新调整了CSS属性，重复的样式统一用一个类实现。 添加了transition属性，有意思多了。 目标 和原来的网页一模一样，和第一次不同的是尽量不查资料 技能水平 HTML5+CSS3基本布局，不涉及JavaScript的知识 效果图 心得 关于样式方面，这次代码量缩减了很多，还是想避免出现功能重复的样式。 因为有第一次仿...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
使用postcss-px2rem插件把px转变为rem，并配合给html根元素设置fontsize，来实现页面的自适应效果
07-22
"使用postcss-px2rem插件把px转变为rem，并配合给html根元素设置fontsize，来实现页面的自适应效果"这一主题，正是解决这个问题的一种常见方法。下面我们将详细探讨这一技术栈中的各个组成部分。 首先，`px`是像素...
了解和使用CSS中的rem单位
01-08
CSS中的`rem`（root em）单位是一种相对长度单位，用于表示元素的尺寸相对于文档根元素（通常是`<html>`）的字体大小。这个单位在Web设计中被广泛使用，因为它提供了一种更加灵活和一致的方式来控制页面布局，特别是...
仿旧优酷移动端首页html+css静态页面
05-28
使用HTML+css实现了优酷手机端首页的静态布局，对于手机端网页的搭建结构有了初步的了解以及应用。
仿优酷首页前端代码
03-19
仿优酷首页前端html+css+js代码，可以用到多图片页面的布局上
将优酷视频嵌入手机移动端
liuzp111的专栏
07-29 5533
.webui{padding-top: 10px;overflow:hidden;width:100%;} .webui img{width:100%; height:100%;} 上方代码中的src中的链接换成所需要的链接地址即可：
在html 中插入优酷视频
社会犹如一条船，每个人都要有掌舵的准备
07-01 7279
今天给大家分享一段迷你播放器的调用代码。使用这段代码，可以避免广告，避免点击跳转到优酷网站。 http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMTE3NzQ0NTky &isAutoPlay=false&isShowRelatedVideo=false" wmode="transpare
优酷播放的html代码,在网页里面嵌入播放优酷视频的js代码
weixin_34638409的博客
06-03 1120
先上代码，然后再讲解一下代码为啥是这样写的； 以上是html部分；js部分代码：function start_play(){$.getScript('http://player.youku.com/jsapi',function(){player = new YKU.Player('youkuplayer',{styleid: '0',client_id: 'c1ae14be1675...
优酷视频HTML网址自动播放,优酷视频html5嵌入代码
weixin_42168265的博客
05-31 1383
视频是一种非常有效的表达方式：在博客上用视频表达一些观点在产品页提供demo视频，让用户更快了解产品，比如 Bungeerapp虽然可以将视频放在自己的server上，但对于非专攻视频的站点:访问速度难以保证流量可能也是问题优酷的在这些方面做的很好，将视频放到优酷是不错的解决方案。但是优酷提供的嵌入方式有些不理想的地方：桌面浏览器默认使用flash播放，在Mac，Linux等平台上体验不好。短视...
初学HTML/CSS仿写百度首页
LMH1024504263的博客
02-05 636
仿写的界面入如下： 写的过程中还是有很多问题的，目前的这个界面只能用a标签进行跳转还需要解决的问题还有很多。 遇到的问题以及解决方案： 1、布局问题，经常出现位置搞不好的问题。 解决方案：把所有的元素放在div中，然后相对div进行位置设定。 2、百度搜索框用了div拼接，但是有间隙。 解决方案：用了margin的负值把空隙填充完整。 主要问题： 1、最上方导航栏有部分功能未实现（我觉得可以用C...
html在网页中加入视频,如何在自己的网页嵌入优酷视频(easy)
weixin_36040903的博客
06-03 1377
准备：前端基础1、优酷开发者账号 + 应用ID2、如果你还没有优酷开发者账号和应用ID：http://cloud.youku.com/docs/docs?id=0，需要审核，一半半天到一天就OK。如下为我创建的应用起飞打开文档：http://cloud.youku.com/tools我们选择工具->页面上传工具，依次选择你创建的应用，当然这个应用对应的client id也要记着(避免基础差的...
HTML5+CSS3+JS小实例：仿优酷视频轮播图
最新发布
我们好像在哪见过 私
12-26 1303
仿优酷视频轮播图，CV直接运行！！！
html中使用postcss-pxtorem自适应屏幕
06-01
在 HTML 中使用 postcss-pxtorem 实现自适应屏幕的步骤如下： 1. 安装 postcss-pxtorem 插件： 可以使用 npm 安装：`npm install postcss-pxtorem --save-dev` 2. 在项目中创建 postcss.config.js 文件： 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值