Web Front-end
HTML Tutorial
HTML5 new attributes, I don't understand very well, please solve_html/css_WEB-ITnose
HTML5 new attributes, I don't understand very well, please solve_html/css_WEB-ITnose
①Why can a triangle be formed like this? I don’t understand the principle
<!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></head><body><style type="text/css">.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0;padding-left:180px;}.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #000; position: absolute; left: 730px; top: 23px; }/* 三角形 */</style> <ul class="arrow_box"> <div class="sy"> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p> </div> <span class="dateview">2014-1-1</span> </ul></body></html>②Why does the vertical line in the picture appear?
<!doctype html><html><head><meta charset="gb2312"><title>协议</title><link href="css/base.css" rel="stylesheet"><link href="css/mood.css" rel="stylesheet"></head><body><header> </header><div class="moodlist"> <div class="bloglist"> <ul class="arrow_box"> <div class="sy"> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p> </div> <span class="dateview">2014-1-1</span> </ul> <ul class="arrow_box"> <div class="sy"> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p> </div> <span class="dateview">2014-1-1</span> </ul> <ul class="arrow_box"> <div class="sy"> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p> <span class="dateview">2014-1-1</span> </div> </ul> </div></div><footer> </footer></body></html>
@charset "gb2312";/* CSS Document */* { margin: 0; padding: 0 }body { font: 12px "宋体", Arial, Helvetica, sans-serif; color: #756F71 }img { border: 0; display: block }ul { list-style: none; }a:link, a:visited {text-decoration: none; color: #333;}.left { float: left; }.right { float: right; }.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }.box{ width:1000px; margin:auto; overflow:hidden}header { width: 1000px; margin: auto; height: 80px; position: relative; overflow: hidden }#logo a { width: 260px; height: 60px; margin: 10px 0 0 0; position: absolute; background: url(../images/logo.jpg) no-repeat; display: block }nav { float: right; width: 100%; margin: 30px 0 0 0; text-align: right }nav a { position: relative; display: inline-block; font-size: 18px; font-family: "微软雅黑", Arial, Helvetica, sans-serif; }nav a:hover { text-decoration: none }.topnav a { margin: 0 5px; padding: 0 8px; }.topnav a span:first-child { z-index: 2; display: block; }.topnav a span:last-child { z-index: 1; display: block; color: #999; font: 12px Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align: center }.topnav a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }#topnav_current { color: #e15782; }.en { color: #999; font-size: 12px; z-index: 1; display: block; }/* ie */article { width: 1000px; margin: 20px auto; overflow: hidden }aside { width: 250px; }footer { text-align: center; line-height: 40px; border-top: #E8E8E8 1px solid ; width:1000px; margin:auto}@charset "gb2312";/* CSS Document */.moodlist { margin: auto; width: 100%; overflow: hidden }/* --------------------博客列表-------------------- */h1.t_nav span{ float:right; color:#999}h1.t_nav { border-bottom: #F1F1F1 1px solid; font-size: 12px; font-weight: normal; line-height: 40px; height: 40px;margin:20px auto;width:1000px }h1.t_nav a { width: 100px; display: block; text-align: center; color: #fff; float: left }.n1 { background: #5EA51B; }.n2 { background: #8BBF5D; }.bloglist { width: 1000px; margin: 0 auto; background: url(../images/r_title_bg.jpg) repeat-y 764px 0;overflow: hidden; }.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0; }.arrow_box img { width: 150px; float: left; margin: 0 20px 0 20px; }.arrow_box p { line-height: 24px; padding: 0 20px 20px }.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; }/* 三角形 */.arrow_box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 758px; top: 16px; background: #CCCCCE; border: 2px solid #fff; transition: all 0.5s; }/* 圆形 */.arrow_box:hover::before { border-color: transparent transparent transparent #CECCCD }/* 三角形 */.arrow_box:hover::after { border: #fff 2px solid; background: #5EA51B }/* 圆形 */.arrow_box:hover { background: #f4f2f2; color: #333; text-shadow: #f7f7f7 1px 1px 1px }.dateview { position: absolute; left: 788px; top: 20px; width: 125px; line-height: 30px; background: #5EA51B; border-radius: 0px 40px; text-align: center; color: #fff }.page { margin: 20px 0; text-align: center; width: 100%; overflow: hidden; }.page a b { color: #999; }.page>b, .page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */.page>b, .page a:hover { background: #333; color: #FFF; }.page a { color: #F33; border: #999 1px solid; }.sy{ overflow:hidden}③
.arrow_box::before { content : ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; } /* Triangle */
Used: before Why is the triangle still behind?
Reply to discussion (solution)
Please help
css controlled Well, I didn’t see any tags related to html5. . . ,
①Why can a triangle be formed like this? I don’t understand the principle
The triangle is actually the corner of the left border.
border-width: 0px 0 20px 22px; It means that the width of the left border and the bottom border is set, but the other borders are not set (do not exist).
The left border and the bottom border intersect, and this intersection point html is processed as half of the two borders (triangle), and then combined into a rectangle. (Note, the intersection of two lines is a point, but if the line is thicker, the intersection will be larger, and the point will become a rectangle)
border-color: transparent transparent transparent #000; Note that except the left border is black All other borders are transparent (invisible).
All that is left is the left border (including the intersection triangle).
width: 0px; height: 0px; It means that the box is empty (does not take up space), so only the intersection triangle is left.
②Why does the vertical line in the picture appear?
Using the code you posted, I didn’t find the vertical line.
③ Why is the triangle still behind after using :before?
before is right before the content, but there is no rule that the elements written in front must be displayed in front.
position: absolute; left: 730px; top: 23px; has been repositioned.
①Why can a triangle be formed like this? I don’t understand the principle
The triangle is actually the corner of the left border.
border-width: 0px 0 20px 22px; It means that the width of the left border and the bottom border is set, but the other borders are not set (do not exist).
The left border and the bottom border intersect, and this intersection point html is processed as half of the two borders (triangle), and then combined into a rectangle. (Note, the intersection of two lines is a point, but if the line is thicker, the intersection will be larger, and the point will become a rectangle)
border-color: transparent transparent transparent #000; Note that except the left border is black All other borders are transparent (invisible).
All that is left is the left border (including the intersection triangle).
width: 0px; height: 0px; It means that the box is empty (does not take up space), so only the intersection triangle is left.
②Why does the vertical line in the picture appear?
Using the code you posted, I didn’t find the vertical line.
③ Why is the triangle still behind after using :before?
before is right before the content, but there is no rule that the elements written in front must be displayed in front.
position: absolute; left: 730px; top: 23px; has been repositioned.
border-width: 0px 0 20px 22px;
That intersection is where each border occupies half of the diagonal, right?
What is the significance of different widths?
③ Used: before Why is the triangle still behind?
before is right before the content, but there is no rule that the elements written in front must be displayed in front.
position: absolute; left: 730px; top: 23px; has been repositioned.
Doesn’t before mean that one element is specified in front of another element?
That intersection point is where each border occupies half of the diagonal, right? What is the significance of the different widths of
vs.
?
If the width is the same, it is an isosceles triangle. If it is different, it is an equilateral triangle.
Isn’t before just specifying one element in front of another element?
The :before selector inserts content before the content of the selected element.
is inserted before all content inside the specified element.
This insertion can be understood as inserting a piece of code, which means that the code is in the front, but you can write css styles to make it display elsewhere.
Got it, thank you
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to write an algorithm to find the least common multiple in Python?
Sep 19, 2023 am 11:25 AM
How to write an algorithm to find the least common multiple in Python? The least common multiple is the smallest integer between two numbers that can divide the two numbers. In mathematics, solving the least common multiple is a basic mathematical task, and in computer programming, we can use Python to write an algorithm for solving the least common multiple. The following will introduce the basic least common multiple algorithm and give specific code examples. The mathematical definition of the least common multiple is: If a is divisible by n and b is divisible by n, then n is the least common multiple of a and b. To solve the minimum
A quick way to calculate the inverse of a matrix - Numpy implementation
Jan 24, 2024 am 08:47 AM
Numpy is a well-known scientific computing library in Python, which provides rich functions and efficient computing methods for processing large multi-dimensional arrays and matrices. In the world of data science and machine learning, matrix inversion is a common task. In this article, I will introduce how to quickly solve the matrix inverse using the Numpy library and provide specific code examples. First, let's introduce the Numpy library into our Python environment by installing it. Numpy can be installed in the terminal using the following command: pipinsta
Using C language programming to solve the greatest common divisor
Feb 21, 2024 pm 07:30 PM
Title: Use C language programming to implement the greatest common divisor solution. The greatest common divisor (Greatest Common Divisor, GCD for short) refers to the largest positive integer that can divide two or more integers at the same time. Solving for the greatest common divisor can be very helpful for some algorithms and problem solving. In this article, the function of finding the greatest common divisor will be implemented through C language programming, and specific code examples will be provided. In C language, you can use the Euclidean Algorithm to solve the maximum
How to use Python to implement the algorithm for solving factorial?
Sep 19, 2023 am 10:30 AM
How to use Python to implement the algorithm for solving factorial? Factorial is an important concept in mathematics. It means that a number is multiplied by itself minus one, then multiplied by itself minus one, and so on until it is multiplied to 1. Factorial is usually represented by the symbol "!". For example, the factorial of 5 is expressed as 5!, and the calculation formula is: 5!=5×4×3×2×1=120. In Python, we can use loops to implement a simple factorial algorithm. A sample code is given below: deffacto
Learn how to find the greatest common divisor in C language
Feb 21, 2024 pm 11:18 PM
To learn how to find the greatest common divisor in C language, you need specific code examples. The greatest common divisor (Greatest Common Divisor, GCD for short) refers to the largest positive integer among two or more integers that can divide them. The greatest common denominator is often used in computer programming, especially when dealing with fractions, simplifying fractions, and solving problems such as the simplest ratio of integers. This article will introduce how to use C language to find the greatest common divisor and give specific code examples. There are many ways to solve the greatest common divisor, such as Euclidean
C/C++ program to find the nth Fibonacci number?
Sep 12, 2023 pm 06:01 PM
The Fibonacci sequence is a sequence of numbers in which the next term is the sum of the previous two terms. The first two terms of the Fibonacci sequence are 0 followed by 1. In this problem, we will find the nth number in the Fibonacci sequence. To do this we will count all the numbers and print n items. Input:8Output:011235813 Description 0+1=11+1=21+2=32+3=5 Use a For loop to sum the first two items as the next item Example #include<iostream>usingnamespacestd;intmain(){ intt1= 0,t2=1,n,i,nextTerm;&am
How to solve for powers of 2 in PHP?
Mar 28, 2024 am 11:09 AM
Title: How to solve for powers of 2 in PHP? Specific code examples are shared in PHP programming. Solving the power of numbers is a common requirement, especially in some algorithms and mathematical calculations. This article will discuss in detail how to solve the power of 2 in PHP and provide specific code examples for your reference. In PHP, you can use the exponentiation operator ** to calculate powers. For powers of 2, calculate $2^n$, where $n$ is the exponent of the power. Below we will implement this calculation in a few different ways. Method 1: Use ** luck
Writing a program to solve modular equations in C/C++?
Sep 12, 2023 pm 02:21 PM
Here we will see an interesting problem related to modular equations. Let's say we have two values A and B. We must find the number of possible values that variable X can take such that (AmodX)=B holds. Suppose A is 26 and B is 2. So the preferred value of X would be {3,4,6,8,12,24}, hence the count of 6. This is the answer. Let's take a look at the algorithm to understand better. Algorithm possibleWayCount(a,b)−begin ifa=b,thenthereareinfinitesolutions ifa
