排行榜

  • 用户榜
  • 标签榜
  • 冲榜分奖金

频道

最新最热悬赏待采纳 筛选
  • 3

    回答

  • 19

    浏览

规格折行后,行间距怎么调整呢,太紧了。

  • 4

    回答

  • 34

    浏览

做了个项目,用到了el-input,有用到maxlength和:show-word-limit,然后又用到了clearable,输入的文字被clearable按钮挡住了,请问怎么办  

  • 3

    回答

  • 30

    浏览

((a,b,c) => {}).length

  • 2

    回答

  • 26

    浏览

我今天遇到了一个问题,一个页面需要做tab吸顶功能,上面有个内容区,中间是tab,下面是用swiper,scroll-view 实现的滑动页面 我想tab滚动到顶部的时候吸顶,这个时候swiper里面的scroll-view才能滚动,否则不滚动,但是现在我的这个页面只能swiper里面的scroll-view能滚动,页面没法滚动,所以没法做tab的吸顶功能了,求帮助  

  • 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

  • 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>

回答 arthasno1
采纳率25%
19天前
  • 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"属性或方法... !!!求大神指点~

回答 姜子荣!
采纳率0%
18天前
  • 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

    浏览

1.定时任务小黑块按照方向移动,想监听触碰绿色区域 2.绿色区域可能会有多个

  • 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>&nbsp;</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

    浏览

因为最初没有要求适配移动端,临时加的需求,要保证移动和pc双端适配,已知的可以用媒体查询(需要加很多代码),不知道有没有别的好方法.写两套样式也行,可是工作量会增大很多.除此以外,还有没有别的好的解决方法?

  • 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; }  

回答 whitevil
采纳率0%
11天前
  • 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; } 为啥不成功呢?

回答 浮世||年华
采纳率100%
10天前
  • 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="更多">更多&gt;&gt;</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="更多">更多&gt;&gt;</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="更多">更多&gt;&gt;</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>  

  • 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); }  

回答 帅帅付
采纳率0%
2天前
  • 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>