要使用CSS制作通过鼠标拖动改变尺寸的页面元素，需要使用CSS中的resize属性和拖动事件。
首先，将要调整大小的元素的CSS样式中加入resize属性，值为both（表示可以在水平和垂直方向上调整大小）或者horizontal（表示只能在水平方向上调整大小）或者vertical（表示只能在垂直方向上调整大小）。
例如，要使一个div元素可以在水平和垂直方向上调整大小，可以这样设置CSS样式：
div {
resize: both;
overflow: auto; /* 使得元素可以滚动 */
}接着，在JavaScript中，使用拖动事件监听器来实现拖动调整大小的操作。可以使用onmousedown、onmousemove和onmouseup事件来实现拖动。
let element = document.getElementById("resizeable");
let startX, startY, startWidth, startHeight;
element.addEventListener("mousedown", function(e) {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);
document.documentElement.addEventListener("mousemove", doDrag, false);
document.documentElement.addEventListener("mouseup", stopDrag, false);
});
function doDrag(e) {
element.style.width = (startWidth + e.clientX - startX) + "px";
element.style.height = (startHeight + e.clientY - startY) + "px";
}
function stopDrag(e) {
document.documentElement.removeEventListener("mousemove", doDrag, false);
document.documentElement.removeEventListener("mouseup", stopDrag, false);
}在这个例子中，我们首先获取了要调整大小的元素（假设它的id为“resizeable”），并在mousedown事件中记录了初始的鼠标位置和元素的宽度和高度。然后在mousemove事件中计算鼠标移动的距离并更新元素的宽度和高度。最后在mouseup事件中移除事件监听器。
注意，在拖动调整大小的时候，可能会出现元素溢出的情况，因此需要在CSS样式中加入overflow属性来设置元素的溢出行为。