HTML连载85-添加选择圆点

最新推荐文章于 2021-06-05 13:45:27 发布
最新推荐文章于 2021-06-05 13:45:27 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44630050/article/details/105780967
版权

一、添加选择圆点，先上个半成品

85.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<!--顶部区域-->
<div class="top">
    <div class="top_in">
        <div class="top_left">
            <h1><a href="#" title="努比亚"></a></h1><!--a标签里面的title属性，就是用于当鼠标放到a标签上面的时候会显示的文字-->
        </div>
        <div class="top_right">
            <ul class="top_nav">
                <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>
            <ul class="top_login">
                <!--这里有一个注意点，我们想要使用的右浮动，所以三个li标签应该倒叙写，因为先写的先浮动哦-->
                <li><a href="#">注册</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</div>
<!--广告区域-->
<div class="banner">
    <div class="nav_out">
        <div class="nav">
            <ul>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <div class="figure">
        <img src="image/banner.png" alt="">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="video"></div>
</div>
<!--内容区域-->
<div class="content"></div>
<!--底部区域-->
<div class="footer"></div>
</body>
</html>

/*顶部区域*/
.top{
    height:60px;
    width:100%;/*也就是和父元素一样宽，这里使用百分比的形式，使得网页扩大减小都不会变形*/
    background-color: black;

}
.top .top_in{
    width: 1200px;
    margin:0 auto;
    height:100%;
    /*background-color: yellow;*/
}
.top  .top_left{
    float:left;
    height:100%;
    width:190px;
    /*background-color: pink;*/
}
.top .top_left>h1{
    width: 100%;
    height: 100%;

}
.top .top_left>h1>a{
    display: inline-block;
    width: 100%;
    height: 100%;
    background:url("../image/nubia_logo.png");
    background-size: 190px 60px;/*设置图片大小正好适配div块的大小*/
}
.top .top_right{
    float:right;
    height: 100%;
    width: 800px;
    /*background-color: pink;*/
}
.top .top_nav{
    float:left;
    width:550px;
    height: 100%;
    /*background-color: skyblue;*/


}
.top .top_nav>li{
    float:left;
    list-style: none;
}
.top .top_nav>li>a{
    font-size:25px;
    font-weight: bold;/*给文字加粗*/
    line-height:60px;
    color:white;/*文字的颜色，直接是color*/
    margin-left:20px;/*这是给文字添加空隙*/
    text-decoration:none;/*去掉文字的下划线*/
}
/*.top .top_nav>li>a:hover{!*移动鼠标上去变化颜色*!*/
    /*color:#e82c07;*/
/*}*/
.top .top_login{
    float:right;
    width: 150px;
    height: 100%;
    /*background-color: skyblue;*/
}
.top .top_login>li{
    list-style: none;
    float:right;
    margin-right:10px;
}
.top .top_login>li>a{
    font-size:20px;
    font-weight:bold;
    line-height:60px;
    color:white;

    text-decoration:none;
}
.top ul>li>a:hover{/*移动鼠标上去变化颜色*/
    color:#e82c07;
    /*这里我们使用.top ,top_login>li>a:hover而使用了ul来替代top_login这个可以说是代码的重构，我们希望
    li标签里的文字鼠标悬浮都变色，这样我们把父层级一改，可以省略代码，在后续编程中这些都是隐形的小技巧
     */
}
.top .top_login>li:nth-child(3){
    width: 30px;
    height: 37px;
    background:url("../image/nubia_person.png");
    margin-top:10px;
}

/*广告区域*/
.banner{
    height: 800px;
    width: 100%;
    /*background-color: green;*/
}
/*内容区域*/
.content{
    height: 1883px;
    width: 100%;
    background-color: blue;
}
.banner .nav_out{
    background-color: white;
    height: 157px;
    width: 100%;
}

.banner .nav{
    width: 1200px;
    height: 157px;
    /*margin:0 auto;*//*这里我们想要居中这个模块，但是我们把定位流变成了绝对定位,所以就不管用了*/
    /*background:pink;*/
    position:absolute;/*只所所以改成绝对定位流，就是想要让这个盒子脱标，这样就可以让nav这个盒子悬浮在下个盒子上面*/
    left:50%;/*通过这种方式来进行居中盒子，靠左边的一边，然后利用一半的宽度-600px进行回退*/
    margin-left:-600px;
    background:white;
}
.banner .nav>ul{
    width:100%;
    height:100%;
    /*background:yellow;*/
    padding-left: 75px;
    padding-right:75px;
    box-sizing:border-box;/*上面使用了内边距，这里是为了不让大盒子变形*/
}
.banner .nav>ul>li{
    width: 150px;
    height:100%;
    /*background:purple;*/
    float:left;/*之所以变成浮动流，是因为li会独占一行，这样会占有七行，浮动流可以使它水平排版了*/
    /*border:1px solid black;*/
    box-sizing:border-box;/*为了就是不用因为边框而使得盒子变大变小*/
    list-style: none;
}
.banner .nav>ul>li:hover{
    border-bottom:3px red solid;
    box-sizing:border-box;
}
.banner .nac>ul>li image{
    width:150px;
    height:157px;
}
.banner .figure{
    width: 100%;
    height: 600px;
    /*background:red;*/
    overflow:hidden:/*隐藏图片的滚动条*/
    position:relative;
}
.banner .figure>img{
    /*margin:0 auto;这个语法没有效果，对其父元素使用text-align:center；也是没有用的，因为图片太大了，解决方式如下：*/
    /*如果图片的宽度大于了父元素的宽度，不可能使用margin:0 auto；或者text-align:center;来使图片居中*/
    /*如果图片的宽度大于父元素的宽度，可以使用定位流，来使得图片居中,但是定位流的弊端也是比较明显*/
    /*弊端：1.需要写三行代码；2.必须知道图片的宽度；*/
    /*还有一种方法：margin:0 -100%; 注意点：父元素必须设置text-align:center;*/
    width:1200px;
    position:absolute;
    margin-left:570px;
    /*如果图片太长而多了一个滚动条，那么可以在父元素的CSS代码中添加overflow属性*/
}
.banner .figure>ol{
    width: 150px;
    height: 20px;
    /*background:red;*/
    position:absolute;/*子绝父相*/
    left:50%;
    margin-left:-75px;
    bottom:300px
}
.banner .figure>ol>li{
    float:left;
    width: 8px;
    height: 8px;
    background:red;
    margin-left:15px;
    border-radius:50%;
    border:2px solid transparent;/*transparent代表的是透明色，当然你也可以用rgba来显示透明色*/
    transition: all 1s;
    list-style: none;
 }
.banner .figure>ol>li:hover{
    border:2px solid black;
    background: transparent;
    transform:scale(2,2);/*放大两倍*/
}
.banner .video{
    width: 1200px;
    height: 250px;
    margin: 0 auto;
    margin-top: 10px;
    /*background:skyblue;*/
}

/*底部区域*/
.footer{

}

二、源码：
1.项目：Nubia
地址:
https://github.com/ruigege66/HTML_learning/tree/master/Nubia
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
85.2

睿里睿气
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html圆点单选,css实现漂亮的checkbox多选框和radio单选按钮
weixin_29443201的博客
05-30 1914
html控件默认样式都不好看，需要css来美化，本文介绍的checkbox多选框和radio单选按钮也不例外，美化工作需要css+图片来完成。漂亮的checkbox多选框和radio单选按钮实际使用中，除了用css和图片来美化样式效果之外，Javascript或JQuery脚本也是少不了的，不然提交表单时传值就有问题。下面几张是本实例中要用到的图片checkbox多选框和radio单选按钮的图片演...
html圆圈点选择,如何用html5点击相应链接时用颜色填充圆圈
weixin_35813719的博客
06-02 1031
如何填写画布圈时的HTML链接被点击 这里一个灵活的功能，绘制一个圆圈，并可选择填充该圆圈：function drawCircle(context,fill){context.beginPath();context.arc(55, 30, 20, 0, 2 * Math.PI);context.closePath();context.stroke();if(fill){context.fill()...
HTML单项选择圆点,jquery – 带有html画布的圆点图案
weixin_39897392的博客
05-30 252
我目前拥有的是很多html元素,以及jQuery和css来创建一个基于鼠标移动效果的点阵图案.很难解释所以我做了一个例子. http://jsfiddle.net/sebastianscholten/u6ebt390/@H_301_5@var mX,mY,distance;function theDistance(elem,mouseX,mouseY) {return Math.floor(Mat...
html 圆点
韩梦飞沙_韩亚飞
06-04 2070
<div style="width:20px;height:20px;border-radius:50%;background-color:red;"></div>
html 圆形选择,html弹出圆形菜单
weixin_39761645的博客
06-04 550
首页功能越来越多，放了好几个图片链接，然后链接还在不断增加，这时需要一个可扩展，又漂亮的菜单网上找了个小插件吧，但是它的按钮位置什么的都是固定写死的，不好做扩展(源码找不到引用网址了)，现在我把按钮做成自动计算位置先来个效果图(调试中，可能有点丑) 默认只显示1号按钮，点击1号，会弹出2/3/4/5/6这几个按钮的图片都可以更换，其中6号为没有添加图片的按钮，2/3/4/5/6的位置都是使用js计...
jeecg-boot中石油vxe-table出现圆点
05-11
yarn.lock锁定住版本
17--[圆点3].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码
04-18
17--[圆点3].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17--[圆点3].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17--[圆点3].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17--...
Android-bannerDot贝塞尔圆点指示器
08-13
3. 动画效果：可以添加平移、缩放、淡入淡出等动画，使指示器在页面切换时更加生动。 4. 可定制性：提供接口或属性，让开发者可以根据不同场景自定义圆点的形状、数量、颜色等。 在提供的文件"yanyiqun001-...
17--[画圆点].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码
04-18
17--[画圆点].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17--[画圆点].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17--[画圆点].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码17...
HTML5 SVG圆点跳动加载特效
07-24
总结来说，"HTML5 SVG圆点跳动加载特效"是利用HTML5的SVG技术和CSS/JavaScript动画功能，为网页加载过程添加的一种视觉反馈。它通过SVG元素绘制圆点并用CSS或JS控制其动态行为，提供了一种吸引用户的加载体验。通过...
html怎么打出一个圆点,如何打出两个字中间的圆点
weixin_39655689的博客
06-05 5781
“我的·童年”里圆点怎么打？下面我就和大家分享几个常见的方法吧。方法1 键盘上的~按键01我们把电脑上的输入法调整成中文输入状态，然后我们在需要圆点的地方再按一下~键就好了，是不是很容易。(ps:该键位于ESC键下，数字键1旁)02效果立竿见影。方法2 特殊符号输入01我们在输入法的状态栏里面单击输入方式那个图标，输入法标题栏中缩小版的键盘(ps:以搜狗输入法为例)然后点击“特殊符号”。02这个点...
html中圆圈如何只选一个,标签通过只是标签而不是单选按钮中的圆圈html
weixin_34553861的博客
06-02 356
.pretty-radio label {border-radius: 5px;border-width: 2px;border-style: solid;border-color: black;margin: 3px;padding: 0px 10px;display: inline-block;}.pretty-radio input[type=radio].Urgent:checked ~ ...
html小圆点的标签,HTML常用的标签
weixin_39793638的博客
06-02 1985
1. form标签1.表单可以包含input、label、textareainput标签submit：用于数据提交password： 用于输入密码，输入内容会呈现为小圆点，进行隐藏checkbox ：多选框radio 多选框：通过name属性来分组，name值相同的单选按钮被归为一组。例如：select 下拉选择 并和 option标签一起使用reset 重置表单2.表单属性：action、met...
html中圆圈如何只选一个,是否可以不使用.arc（）或任何其他HTML标记制作一个圆圈？...
weixin_27388739的博客
06-02 143
要绘制一个近似的圆并获取该圆的点，可以在圆形图案线中绘制一系列线段，以便：const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');/* Center and radius of circle */const centerX = 50;const centerY = 50;const r...
html圆圈内小点,前端容易忽略的小点
weixin_34343610的博客
05-31 228
一、基本语法(es5)1、语句和表达式的区别前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。let a = 1 + 3；// 这一整行表示一个语句 ，并且一行中可以存在多个语句，一条语句以；结束。// 而后面的1 + 3 是一个表达式2、使用var等关键字定义的变量和不使用关健字定义的变量的区别let a = 1b = 2// a和b的区别 从某种程度...
html单选框只能点圆圈,Html单选按钮自定义样式
weixin_31632707的博客
05-31 1442
前言：某天，写了一个带有单选按钮的界面，突然想起网上其他网站各种各样的单选按钮，遂想"改下这个圆圈圈怎么样？"，于是在找了一遍单选按钮的样式，没一个说是修改圆圈圈，于是又去网上找了一遍，各种各样，自己选了其中一种并稍加修改，感觉简单通俗易懂，而且最重要的是效果好，故在此和大家分享一下。原理：之前已经提及，html的单选按钮没有提供一个样式能修改其圆圈，所以仅靠一句类似"color:#fff"的语句...
html圆点可点击,JS+HTML实现的圆形可点击区域示例【3种方法】
weixin_33093323的博客
05-31 758
JS+HTML实现的圆形可点击区域示例【3种方法】发布时间：2020-09-12 11:13:45来源：脚本之家阅读：77作者：筱葭本文实例讲述了JS+HTML实现的圆形可点击区域。分享给大家供大家参考，具体如下：方法一：通过usemap映射到的circle形。 方法二：设置div的border-radius:50%。#circle{background:red;width:100px;heigh...
html实现一个圆圈中间打勾,CSS实现打勾
weixin_39615991的博客
06-03 1314
htmlcsshtml,body {padding:0;margin:0;background-color:#667788;color:#efefef;font-family:'Open Sans';}.container {box-sizing:border-box;padding:25px;text-align:center;}.container h2 {margin-bottom:40px...
html圆圈中打钩代码,CSS3点击按钮圆形进度打钩效果的实现代码
weixin_30282917的博客
05-31 894
文章目录 八、CSS3点击按钮圆形进度打钩效果8.1 图片预览8.2 index.html代码8.3 style.css代码八、CSS3点击按钮圆形进度打钩效果8.1 图片预览8.2 index.html代码CSS3点击按钮圆形进度打钩效果 点击按钮8.3 style.css代码body {margin: 0;height: 100vh;width: 100vw;display: flex;ali...
van-progress进度条小圆点
最新发布
08-26
border-radius属性可以设置元素的边框圆角，而伪类:before则可以在元素的内容前面插入一个伪元素，从而实现添加小圆点的效果。在van-progress组件中，可以通过设置border-radius属性的值为50%来将元素的边框变为一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值