排行榜
- 用户榜
- 标签榜
- 冲榜分奖金
频道
- 4
回答
- 34
浏览
做了个项目，用到了el-input，有用到maxlength和:show-word-limit,然后又用到了clearable，输入的文字被clearable按钮挡住了，请问怎么办
- 3
回答
- 30
浏览
- 2
回答
- 26
浏览
我今天遇到了一个问题，一个页面需要做tab吸顶功能，上面有个内容区，中间是tab，下面是用swiper，scroll-view 实现的滑动页面 我想tab滚动到顶部的时候吸顶，这个时候swiper里面的scroll-view才能滚动，否则不滚动，但是现在我的这个页面只能swiper里面的scroll-view能滚动，页面没法滚动，所以没法做tab的吸顶功能了，求帮助
- 4
回答
- 58
浏览
- 3
回答
- 34
浏览
<div class="good w"> <h3>精品推荐</h3> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery</a></li> </ul> <a href="#">修改兴趣</a> </div> 下面是css代码 .good ul{ float: left; } .good ul li{ float: left; } .good ul li a{ font-size: 16px; margin-left: 30px; padding:0 30px; color: #050505; border-left: 2px solid #c5bfc5; } .good a{ float: right; font-size: 16px; margin-right: 30px; color: #00a4ff; } 这样设置时边框出现了以下情况 顶格显示 而我把a标签加入span标签中之后，即<span><a href="#">修改兴趣</a></span> css代码变成了 .good span a{ float: right; font-size: 16px; margin-right: 30px; color: #00a4ff; } 就恢复了正常 想知道怎么回事，找到的相同代码显示是正常的，但是我的只有加了span标签之后才显示正常，仅仅把外边盒子高度设置了60px
- 3
回答
- 16
浏览
- 2
回答
- 37
浏览
IE浏览器也是正常的,只有我自己的谷歌打开是炸的,不知道是不是版本的原因?附图1是谷歌浏览器,图2是IE浏览器
- 5
回答
- 48
浏览
<style> *{color:blue;} body{color:red;} </style> </head> <body> <p>文字实验</p> </body> </html> 各位大神不是 *的权重最小吗，为什么这样，P还是会显示蓝色呢？<body>是标签，应该权重比*要大啊！！！ 百思不得其解！
- 4
回答
- 29
浏览
1.由于我是初学前端嘛？才刚把CSS/HTML基础知识学完？所以我现在看到网页感觉就是盲目乱试，毫无步骤而言，所有请各位大佬们分享一些平时做题的思路。感谢！
- 2
回答
- 21
浏览
代码如下？这是为何呢？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> ul li a:nth-child(1) { color: yellow; } </style> </head> <body> <ul> <li><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> </ul> </body> </html>
- 2
回答
- 18
浏览
话不多说，上图↓↓↓ 第一次遇到对象不支持"isNaN"属性或方法时，修改方法： 将 Number.isNaN(e)&&(e=0),Number.isNaN(t)&&(t=0) 改为 typeof(e) === 'number' && isNaN(e)&&(e=0),typeof(t) === 'number' && isNaN(t)&&(t=0) 这次遇到对象不支持"repeat"属性或方法... ！！！求大神指点~
- 2
回答
- 33
浏览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>语音条</title> </head> <body> <div class="content"> <div class="x-audio-wrap" ref="wrap"> <div class="x-sector"> <div class="x-dot"></div> </div> <div class="x-time">19``</div> </div> </div> </body> <style> body{ background-color: rgb(199, 183, 183); } *{ padding: 0; margin: 0; } .content{ position:absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .x-audio-wrap{ height: 30px; width: 110px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); background-color: #fff; } .x-sector{ height: 7px; width: 7px; border-radius:4px 10px; border-right: 2px solid #ddd; border-top: 2px solid #ddd; transform: rotate(45deg); position: relative; margin-left: 10px; } .x-dot{ height: 4px; width: 4px; border-radius: 4px; background: #ddd; position: absolute; top: 4px; } .x-sector::before{ content: ""; height: 9px; width: 9px; border-radius:4px 12px; border-right: 2px solid #ddd; border-top: 2px solid #ddd; transform: rotate(0deg); position: absolute; right: -7px; top: -7px; } </style> </html> 上面是我的代码。 运行的时候显示： 为啥 把absolute关闭后会显示一个长方形？ 百思不得其姐？跪求大神解惑
- 6
回答
- 45
浏览
- 4
回答
- 31
浏览
代码比较大，不让发，所以发到了百度云盘 链接：https://pan.baidu.com/s/1Lx-dkUlB4UGh5OKcFAaMWQ 提取码：9kuc 复制这段内容后打开百度网盘手机App，操作更方便哦 1.html即单纯轮播图效果 index.css加入1.html中的style部分就可以进行轮播图（类名布局设置的一样），我用vs code自带的ctrl+f追踪了之前我给图片，标签设置的一些旧样式，还有用f12查看布局，但没找到影响轮播图效果的东西，可能我太菜，求大佬帮助。 不必担心我钻牛角尖，我仍然在努力继续学习css剩下的部分，比如less等，但我很想得到一个结果，再次拜谢！
- 1
回答
- 17
浏览
在编译阶段有报错如下 Module build failed: Error: Cannot find module 'clone-deep' 麻烦大佬指点下安装scss需要注意哪些配置，或是说有哪些依赖需要关注，我刚解决完一个版本过高的问题，又来一个。
- 5
回答
- 36
浏览
- 8
回答
- 50
浏览
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <link rel="stylesheet" id="templatecss" type="text/css" href="css/basic-grey.css"> </head> <body> <div> <form action="" method="post" class="Basic-Grey" style=""> <h1 style="">Contact Form<span>Please fill all the texts in the fields.</span></h1> <label> <span>Themplate :</span> <select id="template" name="themplate" onchange="changeStyle();"> <option value="basic-grey">basic-grey</option> <option value="elegant-aero">elegant-aero</option> <option value="smart-green">smart-green</option> <option value="white-pink">white-pink</option> <option value="bootstrap-frm">bootstrap-frm</option> <option value="dark-matter">dark-matter</option> </select> </label> <label> <span>Your Name :</span> <input id="name" type="text" name="name" placeholder="Your Full Name" /> </label> <label> <span>Your Email :</span> <input id="email" type="email" name="email" placeholder="Valid Email Address" /> </label> <label> <span>Message :</span> <textarea id="message" name="message" placeholder="Your Message to Us"></textarea> </label> <label> <span>Subject :</span><select name="selection"> <option value="Job Inquiry">Job Inquiry</option> <option value="General Question">General Question</option> </select> </label> <label> <span> </span> <input type="button" class="button" value="Send" /> </label> </form> </div> <script> function changeStyle() { var template = document.getElementById("template"); var index = template.selectedIndex; var templatevalue = template.options[index].value; var templatecss = document.getElementById("templatecss"); templatecss.setAttribute("href","css/" + templatevalue + ".css"); document.getElementsByTagName("form")[0].setAttribute("class",templatevalue); } </script> </body> </html> /* Basic Grey */ .basic-grey{ margin-left:auto; margin-right:auto; max-width: 500px; background: # F7F7F7; padding: 25px 15px 25px 10px; font: 12px Georgia, "Times New Roman", Times, serif; color: # 888; text-shadow: 1px 1px 1px # FFF; border:1px solid # E4E4E4; } .basic-grey h1{ font-size: 25px; padding: 0px 0px 10px 40px; display: block; border-bottom:1px solid # E4E4E4; margin: -10px -15px 30px -10px;; color: # 888; } .basic-grey h1>span{ display: block; ont-size: 11px; } .basic-grey label{ display: block; margin: 0px; } .basic-grey label>span{ float: left; width: 20%; text-align: right; padding-right: 10px; margin-top: 10px; color: # 888; } .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { border: 1px solid # DADADA; color: # 888; height: 30px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 70%; font-size: 12px; line-height:15px; box-shadow: inset 0px 1px 4px # ECECEC; -moz-box-shadow: inset 0px 1px 4px # ECECEC; -webkit-box-shadow: inset 0px 1px 4px # ECECEC; } .basic-grey textarea{ padding: 5px 3px 3px 5px; } .basic-grey select { background: # FFF url('down-arrow.png') no-repeat right; background: # FFF url('down-arrow.png') no-repeat right); appearance:none; -webkit-appearance:none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; width: 70%; height: 35px; line-height: 25px; } .basic-grey textarea{ height:100px; } .basic-grey .button { background: # E27575; border: none; padding: 10px 25px 10px 25px; color: # FFF; box-shadow: 1px 1px 5px # B6B6B6; border-radius: 3px; text-shadow: 1px 1px 1px # 9E3F3F; cursor: pointer; } .basic-grey .button:hover { background: # CF7A7A; } 为什么引用不成功啊，麻烦瞅一下，求求了
- 2
回答
- 20
浏览
- 4
回答
- 39
浏览
求助，css鼠标移动效果失效， 整体样子是这样的，我想实现下图效果 代码我写出来了，是这样： <!--内容文案--> <div class="content_text"> <p class="content_text_medium">1</p> <p class="content_text_light">2</p> </div> <!--鼠标移动点击跳转--> <div class="content_move"> <a href="#"> <div class="content_move_border"> <div class="content_move_text">了解更多</div> </div> </a> </div> /*鼠标移动效果，从中间至上下*/ .content_move{ width: 160px; height: 42px; margin: 50px auto 80px; overflow: hidden;} .content_move_border{ display: flex; } .content_move_text{ width: 160px; height: 40px; line-height: 40px; text-align: center; cursor:pointer; color: #232323; border: 1px solid #232323; border-radius: 3px; position: relative; transition: 0.4s linear;} .content_move_text:hover{ color: #ffffff;} .content_move_text:after{ width: 0; cursor:pointer; position: absolute; content: ""; top: 0; bottom: 0; left: 0; z-index: -1; background: #232323; transition: 0.2s linear;} .content_move_text:hover:after{ width: 100%;} 然后下一部分，我打算按照设计，将图片设为背景图，可是效果出来是这样 代码是这样 <div class="content_service"> <div class="content_service_speck"> <!--内容文案--> <div class="content_text"> <p class="content_ser_medium">1</p> <p class="content_ser_light">2</p> </div> <!--鼠标移动点击跳转--> <div class="content_ser"> <a href="#"> <div class="content_ser_border"> <div class="content_ser_text">了解更多</div> </div> </a> </div> </div> </div> /*服务区*/ .content_service{ width: 1920px; height: 960px; margin: auto; margin-top: 80px; background: url("../images/CY_Content_Smart_08.jpg"); background-size: contain; position: relative;} .content_service_speck{ width :1920px; height: 320px; margin: 320px auto; position: absolute;} /*服务区通用文案设定*/ .content_ser_medium{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:48px; font-weight: 900; text-decoration:none; margin-top: 80px; letter-spacing: 5px;} .content_ser_regular{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:32px; font-weight: 500; text-decoration:none; margin-top: 30px; letter-spacing: 3px;} .content_ser_light{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:24px; font-weight: 100; text-decoration:none; margin-top: 30px; letter-spacing: 1px;} /*服务区鼠标移动效果，从中间至上下*/ .content_ser{ width: 160px; height: 42px; margin: 50px auto 80px; overflow: hidden;} .content_ser_border{ display: flex; } .content_ser_text{ width: 160px; height: 40px; line-height: 40px; text-align: center; cursor:pointer; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 3px; transition: 0.4s linear;} .content_ser_text:hover{ color: #232323;} .content_ser_text:after{ width: 0; cursor:pointer; position: absolute; content: ""; top: 0; bottom: 0; left: 0; z-index: -1; background: #FFFFFF; transition: 0.2s linear;} .content_ser_text:hover:after{ width: 100px;} 我百度了好久，但是不知道是哪里问题，看CSDN里有说是关于after的问题，新手小白，还望大佬能帮指导下，因为下面设计的，好多都是带背景图的，这个问题解决不了，之后工作进行不下去，谢谢大佬帮帮忙！！！
- 3
回答
- 42
浏览
问题如题所示，容器内的三个div本该水平居中，两旁有28.5/40rem的margin但是没有生效，先是百度了一下，但是相关的原因都是和浏览器默认字体最小是12px有关，但是我设置的明显是大于这个值的，所以没能找出问题所在。 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./fa/css/all.min.css"> <title>爱学习</title> </head> <body> <!-- 创建头部的容器 --> <header class="top-bar"> <div class="menu-btn"> <a href="#"> <i class="fas fa-stream"></i> </a> </div> <h1 class="logo"> <a href="#"> 爱学习 </a> </h1> <div class="search-btn"> <a href="#"> <i class="fas fa-search"></i> </a> </div> </header> </body> </html> css代码如下： * { margin: 0; padding: 0; } .w, .top-bar { width: 693/40rem; margin: 0 auto; } html { font-size: 100vw/750 * 40; background-color: #eff0f4; } .top-bar { display: flex; height: 175/40rem; line-height: 175/40rem; }
- 2
回答
- 23
浏览
网页源代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <h2 align="center">唐诗欣赏</h2> <div class="demo"> <ul class="tabs"> <li><a href="#tab1">月下独酌</a></li> <li><a href="#tab2">独坐敬亭山</a></li> <li><a href="#tab3">望天门山</a></li> </ul> </div> <div id="tab1" class="content"> <p>花间一壶酒，独酌无相亲。</p> <p>举杯邀明月，对影成三人。</p> <p>月既不解饮，影徒随我身。 </p> <p>暂伴月将影，行乐须及春。 </p> <p>我歌月徘徊，我舞影凌乱。 </p> <p>醒时同交欢，醉后各分散。 </p> <p>永结无情游，相期邈云汉。 </p> </div> <div id="tab2" class="content"> <p>众鸟高飞尽，</p> <p>孤云独去闲。</p> <p>相看两不厌，</p> <p>唯有敬亭山。</p> </div> <div id="tab3" class="content"> <p>天门中断楚江开，</p> <p>碧水东流至此回。</p> <p>两岸青山相对出，</p> <p>孤帆一片日边来。</p> </div> </ul> </body> </html> css： * { margin: 0px; padding: 0px; } p { font-family: "微软雅黑"; font-size: 16px; height: 30px; line-height: 30px; text-align: center } .demo { width: 500px; height: 350px; background: #0C9; margin: 10px auto; } ul.tabs { width: 500px; height: 50px; line-height: 50px; background: #063; } a { color: #FFF; text-decoration: none; } .tabs li { list-style: none; float: left; width: 150px; text-align: center; margin-right: 10px; font-weight: bold; } .content { width: 500px; height: 300px; } #tab1, #tab2, #tab3 { display: none; } #tab1:target, #tab2:target, #tab3:target { display: block; background: #CCC; } 为啥不成功呢？
- 1
回答
- 7
浏览
如上图所示，在编写代码的时候这个贴心的功能真的很好用，可以快速的知道上下级关系。 Hbuilder上面有这样的功能吗？
- 1
回答
- 11
浏览
现在banner加了轮播图效果，和视频播放在同一位置，点击视频播放，控制条自动跑到视频的顶部,默认视频给的controls="true"
- 1
回答
- 21
浏览
#container { width: 100%; margin: 0 auto; text-align: center; } #content { width: 100%; margin: 0 auto; overflow: hidden; } .content_left { width: 70%; float: left; border: #060 1px solid; } .content_right { margin-right: 10px; border: #960 1px solid; } table { border-collapse: collapse; margin: 0 auto; text-align: center; height: auto; overflow: hidden; } table td{ border: 1px solid #cad9ea; color: #666; height: 30px; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } <table width="90%" class="table"> <tr> <td> 这是文字这是文字这是文字这是文字这是文字 </td> <td> 时间 </td> </tr> <tr> <td> 这是文字这是文字这是文字这是文字这是文字 </td> <td> 时间 </td> </tr> </table>>
- 1
回答
- 13
浏览
想找的是这个class下控制的样式 <div class="stop"> <span>手机推荐</span> <em>PRDUCTS</em><a href="sjxxList.do" title="更多">更多>></a> </div> 去掉class=“stop”啥样式都没有了，现在想修改这个样式，不知道从哪里能找到？ 这个页面全部代码如下 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="com.util.db"%> <%@taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page language="java" import="java.sql.*" %> <jsp:useBean id="connDbBean" scope="page" class="com.util.db"/> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>迅联网上手机商城</title> <link href="http://www.guangzhengchuanmei.com/demo2/favicon.ico" rel="shortcut icon" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <link rel="stylesheet" type="text/css" href="qtimages/child_page.css"> <link rel="stylesheet" type="text/css" href="qtimages/child_form.css"> <link rel="stylesheet" type="text/css" href="qtimages/child_vip.css"> <link rel="stylesheet" type="text/css" href="qtimages/child_msg.css"> <link rel="stylesheet" type="text/css" href="qtimages/child_cart.css"> <link rel="stylesheet" type="text/css" href="qtimages/child_atm.css"> <link rel="stylesheet" type="text/css" href="qtimages/style.css"> <script type="text/javascript" src="qtimages/jquery.js"></script> <script type="text/javascript" src="qtimages/banner.js"></script> <script type="text/javascript" src="qtimages/nav.js"></script> <script type="text/javascript" src="qtimages/form.js"></script> <script type="text/javascript" src="qtimages/passwordstrength-min.js"></script> <script type="text/javascript" src="qtimages/humane.js"></script> <script type="text/javascript" src="qtimages/child_atm.js"></script> <script type="text/javascript" src="qtimages/menu.js"></script> <script type="text/javascript" src="qtimages/jqselect.js"></script> <script type="text/javascript" src="qtimages/jquery.lazyload.js"></script> <script type="text/javascript" src="qtimages/marquee.js"></script> <script type="text/javascript" src="qtimages/slides.min.jquery.js"></script> <script type="text/javascript"> $(function(){ $('#marquee2').kxbdSuperMarquee({ distance:30, time:3, btnGo:{up:'#goU',down:'#goD'}, direction:'up' }); }); </script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'img/loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(){ $('.caption').animate({ bottom:-35 },100); }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { // example return of current slide number console.log(current); }; } }); }); </script> <script src="qtimages/share.js"></script><link rel="stylesheet" href="qtimages/share_style0_16.css"> </head> <body style="overflow-x: hidden;"> <jsp:include page="qttop.jsp"></jsp:include> <jsp:include page="bht.jsp"></jsp:include> <jsp:include page="sidebufen1.jsp"></jsp:include> <!-- <div class="case"> --> <div class="stop"> <span>手机推荐</span> <em>PRDUCTS</em><a href="sjxxList.do" title="更多">更多>></a> </div> <br /> <div class="profra"> <div class="view-port"> <% int spi=0; %> <c:forEach items="${syshoujixinxi}" var="a"> <% spi++; if(spi<=50) { %> <div class="limg" style="perspective: 1000px;"> <div class="block" data-move-y="300px" data-move-x="-200px" > <a class="img" href="sjxxDetail.do?id=${a.id}" title="${a.shoujimingcheng}"> <span></span> <b></b> <label style="display: none;">${a.shoujimingcheng}</label> <img src="${a.tupian}" alt="${a.shoujimingcheng}" width="235" height="176"></a> </div> </div> <% } %> </c:forEach> </div> </div> <!-- </div> --> <div class="news"><div class="newsleft" style="margin-left: 0px;"> <div class="newsltop"><span>网站公告</span> <em>NEWS</em> <a href="xwtzList.do?lb=网站公告" title="更多">更多>></a></div> <ul class="newsmain"> <ul class="newsmain"> <% int xwi=0; %> <c:forEach items="${syxinwentongzhi1 }" var="a"> <% xwi++; if(xwi<5) { %> <li><a href="xwtzDetail.do?id=${a.id}" title="${a.biaoti}"> <div class="time"><span>${fn:substring(a.addtime, 0, 10)}</span><font></font></div> <div class="newsli_r"> <p class="newsli_rt"><span class="fl">${fn:substring(a.biaoti, 0, 34)}</span></p> <p class="newscont">${fn:substring(a.zhaiyao, 0, 48)}</p> </div> </a> </li> <% } %> </c:forEach> </ul> </ul> </div> <div class="conright" style="margin-right: 0px;"> <div class="pic_scroll" style="width: 334px; height: 488px; position: relative; top: 0px;"> <div class="cont con0" style="width: 334px; height: 244px;"> <img src="qtimages/llww.jpg" style="width: 334px; height: 244px; display: block; border: none;"></div> </div> </div> <div class="conright" style="margin-right: 0px;"> <!-- <div class="hdp_container"> <div class="pic_scroll" style="width: 334px; height: 488px; position: relative; top: 0px;"> <div class="cont con0" style="width: 334px; height: 244px;"> <img src="qtimages/llww.jpg" style="width: 334px; height: 244px; display: block; border: none;"></div> </div> </div> --> </div> </div> <script type="text/javascript" src="qtimages/jquery.smoove.js"></script> <script type="text/javascript">$('.block').smoove({offset:'10%'});</script> <jsp:include page="qtdown.jsp"></jsp:include> </body></html>
- 5
回答
- 34
浏览
- 2
回答
- 34
浏览
瞅瞅这左右边框，上下边框都正常，设置border的颜色为透明的白色（代码写的是鼠标在其上面时设置边框为透明的白色)的后就会这样并且会随着渐变色的角度的变化而变化，如图：（这是45°的时候），不用渐变色就没事了，一开始还以为是background-image的问题，然而用图片测试了一下没问题。有没有大佬救救孩子。下面是代码（渐变色的设置在倒数第二个选择的里面）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="image/02.jpg"> </head> <body> <div> <form action=""> <h1>Login</h1> <p class="p1"> <svg t="1620188120319" id="icon1" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3052" width="30" height="30"><path d="M432.56 527.168a150.192 150.192 0 0 1-73.6-129.248V342.24a150.256 150.256 0 0 1 300.512 0v55.664a150.176 150.176 0 0 1-72.048 128.32A344.432 344.432 0 0 1 824.736 718.4c2.56 5.552 7.232 11.2 7.232 16.928v4.784H832V829.92a16 16 0 0 1-16 16H208a16 16 0 0 1-16-16V749.904l0.32-0.032c0-5.28-0.032-10.656 0.336-16.096 0.368-5.408 4.416-10.608 6.8-15.792a344.432 344.432 0 0 1 233.104-190.816zM240 744.928v52.992h544v-53.008a296.16 296.16 0 0 0-544 0zM509.216 240a102.256 102.256 0 0 0-102.256 102.256v55.664a102.256 102.256 0 0 0 204.512 0V342.24A102.256 102.256 0 0 0 509.232 240z" p-id="3053" fill="#ffffff"></path></svg> <input type="text" placeholder="username" id="username" onfocus="this.placeholder=''" onblur="this.placeholder='username'"> </p> <p class="p2"> <svg t="1620188197911" id="icon2" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3572" width="30" height="30"><path d="M368 392v-65.392C368 243.712 432.16 176 512 176s144 67.712 144 150.608V392h144a16 16 0 0 1 16 16v416a16 16 0 0 1-16 16H224a16 16 0 0 1-16-16v-416a16 16 0 0 1 16-16h144z m48 0h192v-65.392C608 269.648 564.72 224 512 224s-96 45.664-96 102.608V392z m-160 48v352h512v-352H256z m280 144v80a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-80a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z" p-id="3573" fill="#ffffff"></path></svg> <input type="password" placeholder="password" id="password" onfocus="this.placeholder=''" onblur="this.placeholder='password'"> </p> <p><input type="submit" value="登陆" id="login"></p> </form> </div> </body> </html> body { margin: 0px; padding: 0px; border: 0px; background-image: url(../image/background-image.png); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; } div { position: absolute; top: 24%; left: 36%; background-color: #19242a; opacity: 0.7; border-radius: 25px; padding: 50px 150px; } h1 { text-align: center; position: relative; bottom: 40px; font: bold 45px consolas; color: aliceblue; } #icon1 { position: absolute; top: 163px; left: 115px; } #icon2 { position: absolute; top: 210px; left: 115px; } input { height: 30px; width: 230px; border: 0; background-color: #00000000; border-bottom: 3px solid rgba(255, 255, 255, 0.5); color: white; font: large consolas; } input:focus { opacity: 0.7; } #login { height: 40px; width: 150px; display: block; margin: 0 auto; border: 0; background-image: linear-gradient(45deg, #30cfd0 0%, #330867 100%); border-radius: 20px; } #login:hover { border: 10px solid rgba(255, 255, 255, 0.5); }
- 4
回答
- 35
浏览
请教下如何做到把li标签中的文字显示在图片的下方，并且保持所有图片横向排列呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>桂林山水风景</title> <style type="text/css"> h3 { color: red; text-align: center; } div { text-align: center; background-color: red; } ul { list-style-type: none; text-align: center; } li { display: inline; width: 120px; height: 30px; } img { width: 100px; height: 100px; border: 0px; } </style> </head> <body> <h3>桂林山水风景图片</h3> <div> <ul> <li><a href="img/guilin01.jpg"><img src="img/guilin01.jpg" >桂林山水1 </a></li> <li><a href="img/guilin02.jpg"><img src="img/guilin02.jpg">桂林山水2 </a></li> <li><a href="img/guilin03.jpg"><img src="img/guilin03.jpg">桂林山水3 </a></li> <li><a href="img/guilin04.jpg"><img src="img/guilin04.jpg">桂林山水4 </a></li> </ul> </div> </body> </html>