CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。
我正在学习 HTML、CSS，并且在制作像 google 这样的搜索栏时遇到问题。 您能给我任何建议吗？我做错了什么，尤其是尺寸方面？谢谢 ：） 我正在学习HTML，CSS，我在制作像谷歌这样的搜索栏时遇到了问题。 您能给我任何建议吗？我做错了什么，尤其是尺寸方面？谢谢:) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </link> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </link> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="shortcut icon" type="image/x-icon" href="https://image.freepik.com/photos-libre/courbe-de-vapeur-de-la-fumee-d&-39;onde_19-123974.jpg" /> <style> .container { width: 1000px; margin-top: 100px; text-align: center; } h2 { font-family: "Trebuchet MS", Helvetica, sans-serif; size: 150px; fill: #294F6D; } div { width: 500px; height: 50px; } h1 { text-align: center; fill: 02111 D; } .search input[type="search"] { width: 400px; height: 50px; } </style> <body> <div class="container" <form action="/worldoffragrance"> <input name="search" /> <input type="submit" value="GO" /> </form> </div> </body> </html> 感谢您的任何建议:) 试试这个，这可能会在某种程度上帮助你。 已更新 input{ border: none; padding: 10px; margin: 10px; height: 20px; width: 500px; border:1px solid #eaeaea; outline:none; } input:hover{ border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; } input:focus{ border-color:#4d90fe; } input[type="submit"] { border-radius: 2px; background: #f2f2f2; border: 1px solid #f2f2f2; color: #757575; cursor: default; font-size: 14px; font-weight: bold; width: 100px; padding: 0 16px; height:36px; } input[type="submit"]:hover { box-shadow: 0 1px 1px rgba(0,0,0,0.1); background: #f8f8f8; border: 1px solid #c6c6c6; box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #222; } <div class="main"> <input type="text" /> <input type="submit" value="Go"> </div> 我已经做了这个并且工作正常.. <!DOCTYPE html> <html> <head> <style> .searchbar{ margin-top:25px; margin-left:283px; width:100%; } .bar{ border-radius:0; -webkit-box-shadow: 2px 3px 0px -2px #ccc; padding:10px; border:0px; outline: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #CCC; } .bar:hover{ -webkit-box-shadow: 3px 6px 7px -3px #ccc; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-12"> <div class="searchbar"> <div class="form-group "> <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" > <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a> </div> </div> </div> </div> </div> </body> </html> <style> input { border-radius: 24px; border: 1px solid #dfe1e5; background: #fff; padding: 20px; display: flex; z-index: 3; width: 638px; height: 44px; margin: 20px; } input:hover{ box-shadow: 0 0 8px 1px #e1e1e1; } </style> <form action="https://www.google.com/search" method="get"target="_blank" id="search-form"> <input name="q" type="text" placeholder="Google Search" autocomplete="off" autofocus></form> 几乎是 Google 搜索栏的精确复制品 https://abhishek-soren.github.io/Google-Look-Alike/ 您也可以检查一下。看起来很实用。
我有一个 Angular 项目，在我的 app.component.html 中我有这样的组件结构： 我有一个 Angular 项目，在我的 app.component.html 中我有这样的组件结构： <nav class="left-menu-plus-body"> <app-sidebar></app-sidebar> <header class="header-plus-body"> <app-header></app-header> <div class="main-container"> <router-outlet></router-outlet> </div> </header> </nav> <app-footer></app-footer> 另外，我有一个 body CSS 属性： body { background: linear-gradient(90.00deg, rgb(146, 133, 255), rgb(158, 192, 252) 100%); } 与我的所有页面一样，都有一个正文标签，我为整个网站和正文设置了背景颜色： 我需要整个页面只有一个渐变，而不是加倍 您可以使用类来定位特定元素。 <body class="mainBody"> mainBody { background: linear-gradient(90.00deg, rgb(146, 133, 255), rgb(158, 192, 252) 100%); } 尽管无论如何您都不应该对多个子元素使用 body 标签。应该有一个主体类作为 html 标签的子级。
我正在尝试将文本装饰颜色过渡效果应用于链接的子元素。以下是该标记的示例： 我正在尝试将 text-decoration-color 过渡效果应用于链接的子元素。这是该标记的示例： <div class="post"> <a href="/" class="post-link"> <div> <h1>Post name</h1> <div> Lorem ipsum... </div> </div> </a> </div> 整个帖子部分是一个易于点击的链接，但悬停时我只想在 <h1> 下划线。所以我将 post-link 下划线颜色设置为不透明度 0。悬停时将不透明度设置为 1。 .post-link { color: #000; text-decoration: underline solid rgba(12, 11, 10, 0); transition: text-decoration-color 0.2s; } .post-link:hover h1 { text-decoration: underline; text-decoration-color: rgba(12, 11, 10, 1); } 但是，这似乎不起作用。悬停时会出现下划线，但没有过渡效果。 要实现悬停时文本装饰颜色的过渡效果，您应该将过渡属性应用于.post-link类而不是text-decoration-color。这是更正后的 CSS： .post-link { color: #000; text-decoration: underline solid rgba(12, 11, 10, 0); transition: text-decoration-color 0.2s; /* Add transition here */ } .post-link:hover h1 { text-decoration-color: rgba(12, 11, 10, 1); } 这样，当鼠标悬停在链接上时，过渡效果将平滑应用。
我正在尝试在不同的边距上设置指标的可见性。 我有一个滑块，有两个按钮 next n prev。我试图在单击“下一步”按钮时显示活动幻灯片编号，我正在这样做...
Cropperjs 或 Javascript 使用 php 将裁剪后的图像上传到服务器时出现问题
请帮我解决这个问题： <...
我对编程有点陌生，所以如果我的问题很愚蠢或者我要发送的代码不完美，我很抱歉。我正在尝试在 Flask 中构建一个简单的网络应用程序，可以通过
我添加了 CSS 以在帖子中添加超链接下划线的特定样式。我设法让它工作，这样 CSS 就不会影响页眉或页脚。然而，它确实影响了我侧边栏中的链接，wh...
测试页面在桌面和 iPhone 上的 Chrome 中运行良好...... 但是在android手机上测试时： 页面会从低处加载，然后只有在您点击屏幕时才会“跳到适当的位置”或者...
在图像下对齐搜索栏时遇到问题。它以某种方式粘在屏幕的左侧。我是网络开发的新手。我尝试了 display: flex 和 margin 方法。 https://i.sstatic.net/
我正在网页上编写一个在深色模式和浅色模式之间切换的功能，但是 body 标签的内容不会改变。页面顶部的导航栏改变样式，但正文没有......
伪元素嵌套CSS不适用于在<details>下使用`&`作为::标记，但<summary>
尝试使用伪元素 ::marker 进行 CSS 嵌套功能，但发现奇怪的是这种嵌套不起作用 细节 { 内边距：4px； ＆ 概括 { 红色; &::
我想给我的导航菜单加下划线，但问题是我需要它更厚，所以我使用底部边框，这样我就可以将宽度设置为 6px。 我似乎可以弄清楚如何获得
在移动网站上，我有一系列充当面包屑导航链接的表格单元格。 它从左对齐开始，然后每次您深入导航另一个分支时，它都会添加一个...
我有一个很长的菜单，我不想折叠，但我想在我赚很少的时候继续下一行
抱歉我遇到这样的情况： 我有一个很长的菜单，但我不希望崩溃，我只想继续下一行 它正在这样做，但结果很可怕 这是CSS .导航李，{
如何在我的html页面中加载移动版网站作为外部网页全屏 iframe
我想将移动视图响应式网站加载到我的 HTML 页面中。 全屏 iframe 我想将移动视图响应式网站加载到我的 HTML 页面中。 <!DOCTYPE html> <html> <head> <title>full screen iframe</title> </head> <frameset rows="100%,*"> <frame src= "https://en.wikipedia.org/wiki/HTML_element#Frames"> <noframes> <body> </body> </noframes> </frameset> </html> 有了这个，我可以加载，但我想在我们在移动版本中打开维基百科时加载设计。 设置类似于移动设备的 iframe 大小应该可以。 <iframe src="https://en.wikipedia.org/" class="mobile-view"></iframe> 您还需要在 css 或 html 中定义 mobile-view 类。 <style> .mobile-view { width: 375px; height: 667px; border: none; } </style>
我正在使用 Nodejs 开发 CRUD 应用程序，但在从项目目录渲染外部 css 和 bootstrap5 时遇到问题。当我尝试使用 post Id 传递 get 时，仅呈现 html 块。它
我从以下位置复制了 bootstrap5 示例： https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_carousel 我只是将图像源更改为1.jpg、2.jpg、3.jpg。 我将其保存为 .html 文件并且...
我的浮动标签不起作用，有人可以帮助我吗？ 代码 ... 我的浮动标签不起作用，有人可以帮助我吗？ 代码 <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <label for="txtNome">Full Name</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" autofocus id="txtEmail" placeholder=" "> <label for="txtEmail">E-mail</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" id="txtMensagem" placeholder=" " style="height: 200px;"></textarea> <label for="txtMensagem">Message</label> </div> 我认为添加 Bootstrap CDN 链接可能存在问题。当我添加它时，我可以看到像您附加的图像一样的视图。 <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <label for="txtNome">Full Name</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" autofocus id="txtEmail" placeholder=" "> <label for="txtEmail">E-mail</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" id="txtMensagem" placeholder=" " style="height: 200px;" ></textarea> <label for="txtMensagem">Message</label> </div> </body> 您可以使用此获取 Bootstrap CDN 链接 https://getbootstrap.com/docs/5.0/getting-started/introduction/ 检查您是否为 Bootstrap 5 添加了正确的 CSS、Javascript 和 Jquery 文件。这些是您需要导入到代码中的文件。 CSS <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> Javascript <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> Jquery <script src="https://code.jquery.com/jquery-3.5.1.js"></script> 我也被同样的问题困扰了。 我不知道您实际使用的代码是否是您附加的代码，但我发现在我的情况下，缺少 placeholder 属性不允许标签动画。 这不起作用： <div class="form-floating mb-3"> <input type="text" class="form-control" id="username"> <label for="username">Username</label> </div> 这有效： <div class="form-floating mb-3"> <input type="text" class="form-control" id="username" placeholder=""> <label for="username">Username</label> </div> 如果不需要该属性，可以将其设置为空字符串。 在 Bootstrap 版本 5.3.x 上测试。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 添加这个
我正在尝试将文本和图像对齐，如下所示： 但它看起来像这样： 这是我使用的 html 和 css： ：根 { 字体大小：10px； } *, *：：前， *：：后 { 盒式...